如何用javascript中创建的元素替换DOM中的元素?

时间:2019-09-12 18:07:21

标签: javascript dom

我需要将数据附加到给定的元素中,而不是在该元素的底部。我在适当的位置放置了一个占位符,特别是一个元素,它可以正常工作。以下代码应允许我依次定义和替换为javascript中生成的元素。但是当我尝试使用它时,它不起作用,并抛出错误,指出未找到该节点。

我试图交换replaceChild()中的值,据称它将完成我想做的事情。失败。

我尝试用直接且残酷的document.getElementsByTagName("placeholder")[0] = placeholders[placeholder]代替整个命令,而该命令什么也没做。

我已经逐段地测试了其余代码,以消除任何机会在更高的地方出现一个简单的错误,但是直到实际尝试替换Child的地步,一切都应该是正确的,至少我的眼睛。


    var placeholders = [];
    placeholders.push(document.createElement('IMG'));
    placeholders[placeholders.length - 1].alt = 'A sample of raw magicite';
    placeholders[placeholders.length - 1].src =
      document.imagedirectory + 'magicite.png';
    placeholders[placeholders.length - 1].style.border = '3px double black';
    placeholders[placeholders.length - 1].style.height = '100px';
    placeholders[placeholders.length - 1].style.width = '100px';

    for (var placeholder = 0; placeholder < placeholders.length; placeholder++) {
      if (document.getElementsByTagName('placeholder').length > 0) {
        try {
          document
            .getElementById('pagedata')
            .replaceChild(
              document.getElementsByTagName('placeholder')[0],
              placeholders[placeholder]
            );
        } catch (e) {
          console.log(
            'Failure: Attempt to append ' +
              placeholders[0].src +
              ' into the existing content, replacing one of the placeholders.'
          );
        }
      }
    }

在当前状态下,空捕获会吃掉错误消息。如果我删除它并以原始方式运行它,则执行会在document.getElementById("pagedata").replaceChild(document.getElementsByTagName("placeholder")[0], placeholders[placeholder])行上停止,并出现NotFoundError错误:未找到节点

即使document.getElementsByTagName(“ placeholder”)[0]是有效元素,占位符[placeholder]也是有效元素。我很沮丧关于我可能对此造成的混乱以及如何补救的任何想法?

编辑1:应评论者要求添加。

document.imagedirectory = "https://iolarawiki.000webhostapp.com/wiki/img/"

var placeholders = [];
placeholders.push(document.createElement("IMG"));
placeholders[placeholders.length - 1].alt = "A sample of raw magicite";
placeholders[placeholders.length - 1].src = document.imagedirectory + "magicite.png";
placeholders[placeholders.length - 1].style.border = "3px double black";
placeholders[placeholders.length - 1].style.height = "100px";
placeholders[placeholders.length - 1].style.width = "100px";

for (var placeholder = 0; placeholder < placeholders.length; placeholder++) {
  if (document.getElementsByTagName("placeholder").length > 0) {
    try {
      document.getElementById("pagedata").replaceChild(document.getElementsByTagName("placeholder")[0], placeholders[placeholder]);
    } catch (e) {
      console.log("Failure: Attempt to append " + placeholders[0].src + " into the existing content, replacing one of the placeholders.");
    }
  }
}
<HTML>

<BODY>
  <DIV ID="pagedata">
    Some content here
    <BR>
    <PLACEHOLDER>
    </PLACEHOLDER>
    Some more content here
    <BR>
  </DIV>
</BODY>

</HTML>

0 个答案:

没有答案
相关问题