Question

我在外部javascript文件中创建了一个元素：

var element = document.createElement('div');

现在我需要将这个元素附加到正文并仍然保留对它的引用（element变量）。
但是我需要在脚本标记之后添加它 - 就像document.write()那样。

我不能为脚本和元素本身使用类和id - 我不在我的网站上，并且可能有多个脚本。

如何解决这个问题？

背景：我想构建一些可以在其他网站上使用的小部件。

Answer 1

这个怎么样：

if(typeof globalScriptCounter === "undefined")
  var globalScriptCounter = 1;
  else
  globalScriptCounter++;

var scripts = document.getElementsByTagName("script");
var localCounter = 0;
for(var i = 0; i < scripts.length; i++) {
  if(scripts[i].src === "yourwidget.js") { // You should know the path since it is your widget
    localCounter++;

  if(globalScriptCounter === localCounter) {
    document.body.insertBefore(element, scripts[i]);
    break;
    }
}

编辑：我编辑了我的代码。试试吧！

Answer 2

仅创建元素是不够的。使用document.body.insertBefore，document.body.appendChild和其他函数将其添加到页面元素列表中。

示例功能

function addElement()
{
  // create a new div element
  // and give it some content
  newDiv = document.createElement("div");
  newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent); //add the text node to the newly created div.

  // add the newly created element and it's content into the DOM
  my_div = document.getElementById("org_div1");
  document.body.insertBefore(newDiv, my_div);
}

参考：from mozilla

Answer 3

创建新元素时，您将其分配给某个variableName。因此，您可以使用变量名称本身来引用变量。

Answer 4

我最终得到了这个来源：

我的框架的定义（我认为有公平）：

每个小部件脚本标记都有myNamespace-widget-script类
有一个全局myNamespace对象

小部件脚本：

!function() {
//-->BEGIN GET WIDGET INDIVIDUAL ID
var localWidgetCounter = 0;
if ( _.isUndefined(myNamespace) ) {
    myNamespace = {}
}
if ( _.isUndefined(myNamespace.widgetsCounter) ) {
  myNamespace.widgetsCounter = 0;
} else {
  localWidgetCounter = myNamespace.widgetsCounter += 1;
}
//-->END GET WIDGET INDIVIDUAL ID

$.domReady(function() { 
  var teaser = ...here i generate my html DOM elements...
      teaser.insertAfter($('.myNamespace-widget-script')[localWidgetCounter]);
});

}.call({});

对document.write插入的元素的引用

4 个答案: