引用 document.write 插入的元素答案

【问题标题】：reference to element inserted by document.write引用 document.write 插入的元素
【发布时间】：2012-04-11 23:30:07
【问题描述】：

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

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

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

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

如何解决这样的任务？

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

【问题讨论】：

你为什么不让你的用户决定在哪里放置这些小部件？
他们通过包含脚本标签来决定放置它的位置。就像 youtube 使用他们的 iframe 嵌入代码一样。不幸的是，我不能使用 iframe。

标签： javascript embed widget

【解决方案1】：

我最终得到了这个来源：

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

每个小部件脚本标签都有一个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({});

【讨论】：

【解决方案2】：

这个怎么样：

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;
    }
}

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

【讨论】：

你救了我的命！经过一些小的更正后，我最终得到了我的代码 - 见下文。

【解决方案3】：

当您创建新元素时，您将其分配给某个变量名。所以你可以使用变量名本身来引用变量。

【讨论】：

我没有污染全局范围。

【解决方案4】：

仅创建元素是不够的。使用 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

【讨论】：

...我不能为脚本和元素本身使用类和 id - 我不在我的网站上，可能有不止一个脚本......跨度>