在 div 中添加 div答案

【问题标题】：Appending a div in a div在 div 中添加 div
【发布时间】：2019-01-26 22:10:39
【问题描述】：

我在 HTML 页面中有这个。这是一个外部脚本，应该向 canvasDiv 添加一个 div。

如果我将 div 附加到正文中，该脚本将起作用。但是，如果我希望它附加到我通过函数添加的 div 中，它似乎不起作用。我哪里错了？

function AdDiv(divname)
    {
        alert("loaded");
        alert(divname);

        //make a div that will be used for the canvas
        var iDiv = document.createElement('div');
        iDiv.id = 'placedCanvas';
        iDiv.className = 'placedCanvas';

        //document.getElementsByTagName('body')[0].appendChild(iDiv);
        document.getElementsByTagName(divname).appendChild(iDiv);
    }

    <div id="canvasDiv"></div>

    <script type="text/javascript" src="https://pixelvaria.com/wp-content/themes/pixelvaria/js/modelscript.js"></script>
    <script>
       AdDiv("canvasDiv");
    </script>

【问题讨论】：

在文档完全加载（文档就绪事件）时调用 AdDiv()。不是介于两者之间。在这种情况下，DOM 没有完全初始化，不能轻易修改并使用 getElementById()
在你的情况下使用getElementById，而不是getElementsByTagName
谢谢！这现在就像一个魅力！

标签： javascript html function append

【解决方案1】：

您调用了错误的 Javascript 方法。你想要getElementById（因为这是你传递给getElementsByTagName的东西：

function AdDiv(divname)
    {
        alert("loaded");
        alert(divname);

        //make a div that will be used for the canvas
        var iDiv = document.createElement('div');
        iDiv.id = 'placedCanvas';
        iDiv.className = 'placedCanvas';

        //document.getElementsByTagName('body')[0].appendChild(iDiv);
        document.getElementsById(divname).appendChild(iDiv);
    }

    <div id="canvasDiv"></div>

    <script type="text/javascript" src="https://pixelvaria.com/wp-content/themes/pixelvaria/js/modelscript.js"></script>
    <script>
       AdDiv("canvasDiv");
    </script>

【讨论】：

【解决方案2】：

使用这个：

function AdDiv(divId)
{

    //make a div that will be used for the canvas
    var iDiv = document.createElement('div');
    iDiv.id = 'placedCanvas';
    iDiv.classList.add('placedCanvas');

    //append it to the div with the given ID, not name
    document.getElementById(divId).appendChild(iDiv);
}

有了这个：

<div id="canvasDiv"></div>

<script type="text/javascript" src="https://pixelvaria.com/wp-content/themes/pixelvaria/js/modelscript.js"></script>
<script>
   window.onload = function () 
   {
       AdDiv("canvasDiv");
   }
</script>

【讨论】：

【解决方案3】：

您应该使用document.getElementById 通过其id 获取元素。 document.getElementsByTagName（顾名思义）返回具有特定名称的元素的 HTMLCollection。

<div id="canvasDiv"></div>

    <script type="text/javascript" src="https://pixelvaria.com/wp-content/themes/pixelvaria/js/modelscript.js"></script>
<script>
function AdDiv(divname)
{
        alert("loaded");
        alert(divname);

        //make a div that will be used for the canvas
        var iDiv = document.createElement('div');
        iDiv.id = 'placedCanvas';
        iDiv.className = 'placedCanvas';
        iDiv.textContent = "Div text";

        //document.getElementsByTagName('body')[0].appendChild(iDiv);
        document.getElementById(divname).appendChild(iDiv);
}
AdDiv("canvasDiv");
</script>

【讨论】：