我想在不使用jQuery的情况下从javascript附加html_Javascript

我想在不使用jQuery的情况下从javascript附加html

javascript

我想在不使用jQuery的情况下从javascript附加html,javascript,Javascript,.appendChild不适合我，我只想在不使用jQuery的情况下将javascript常量bottomText中的html代码附加到DOM中 const bottomText = ` <div class="bottom-text row"> <div class="column column-left">test <p>xx%<span></span></p&

.appendChild不适合我，我只想在不使用jQuery的情况下将javascript常量bottomText中的html代码附加到DOM中

   const bottomText = `
        <div class="bottom-text row">
          <div class="column column-left">test
            <p>xx%<span></span></p>
          </div>
          <div class="column column-right">
          <p>test</p>
          </div>
        </div>
        <hr>
        `;
document.getElementById("piechart").appendChild(bottomText);

const bottomText=`
测试
xx%
试验

`;
document.getElementById（“piechart”）.appendChild（bottomText）；

还有我的html

<body>
    <div class="graphs">
        <div class="pie-chart" id="piechart">
        </div>
        <script src="./js/pie.js"></script>
        <script src="./js/linegraph.js"></script>
    </div>
</body>

为什么它不起作用？对于jquery，它可以工作，但对于这个项目，他们希望我只使用vanilla js

appentChild（）

将节点作为参数。如果要添加包含的字符串，可以使用

insertAdjacentHTML（）

MDN文档：

appentChild（）

将节点作为参数。如果要添加包含的字符串，可以使用

insertAdjacentHTML（）

MDN文档：

要使用

.appendChild（）

，首先应该创建一个元素：

let element = document.createElement("div");
    document.body.appendChild(element);

要首先使用

.appendChild（）

，您应该创建一个元素：

let element = document.createElement("div");
    document.body.appendChild(element);

您可以使用

.insertBefore（）

没有insertAfter（）方法。可以通过将insertBefore方法与Node.nextSibling相结合来模拟它

函数myFunction（）{
var节点=document.createElement（'li'）；
node.innerHTML='水'
var list=document.getElementById（“myList1”）；
list.insertBefore（节点，list.childNodes[0]）；
}


咖啡
茶

单击按钮将项目从一个列表移动到另一个列表
试试看

您可以使用

.insertBefore（）

没有insertAfter（）方法。可以通过将insertBefore方法与Node.nextSibling相结合来模拟它

函数myFunction（）{
var节点=document.createElement（'li'）；
node.innerHTML='水'
var list=document.getElementById（“myList1”）；
list.insertBefore（节点，list.childNodes[0]）；
}


咖啡
茶

单击按钮将项目从一个列表移动到另一个列表
试试看

document.getElementById（'targetDivId'）。innerHTML+='myHTMLString'？你的意思是，像

document.getElementById（'targetDivId'）。innerHTML+='myHTMLString'

？这是正确的解决方案。我会添加文档以确保完整性，并理解第一个参数@arieljuod，如果你想编辑答案，那么这是正确的解决方案。为了完整性和理解第一个参数@arieljuod，我会添加文档。如果你想编辑答案，我会记录在案，我没有投反对票，但我可以假设，这可能有两个原因-你的代码只是创建空的

，并将其附加到目标节点的末尾（

在本例中为body

）而不是插入自定义HTML。第二，可能是，按照另一个答案的建议，以这种方式操作DOM可能比直接使用

insertAdjacentHTML（）追加HTML代码要慢得多。顺便说一句，我猜这就是为什么insertBefore（）
answer没有得到那么多支持的原因

将任何html代码与

insertAdjacentHTML（）一起放置是不好的做法。作为记录，我没有投反对票，但我可以假设，这可能有两个原因-您的代码只是创建空的
，并将其附加到目标节点的末尾（在本例中为body
），而不是插入自定义html。第二，可能是，按照另一个答案的建议，以这种方式操作DOM可能比直接使用insertAdjacentHTML（）追加HTML代码要慢得多。顺便说一句，我猜这就是为什么insertBefore（）
answer没有得到那么多支持的原因将任何html代码放入insertAdjacentHTML（）
是不好的做法。