Question

<body>
  <div id="outer">
    <script>var e = document.createElement("div");
            e.id = "inner1";
            document.body.appendChild(e);</script>
    <script>document.write("<div id='inner2'></div>");</script>

我想要的结构是： HTML＆GT;身体GT; DIV＃外＆GT; DIV＃inner1 + DIV＃inner2

我得到的结构是： HTML＆GT;身体GT;（DIV＃外＆GT; DIV＃inner2）+ DIV＃inner1

Answer 1

~~这超出了我描述的能力，但似乎适用于你的特定情况（我不知道你是否希望inner1和inner2作为{{1}的孩子或兄弟姐妹1}}。这将它们安排为兄弟姐妹。）~~

~~outer~~

关闭<body> <div id="outer"> <script> var e = document.createElement("div"); e.id = "inner1"; document.body.appendChild(e); </script> <script> var scr = '<script>'; scr += "document.write(\"</div><div id='inner2'>\"); "; scr += '<' + '/script>'; document.write(scr); </script>字符串，以防止解析器崩溃。

怎么样？

</script>

Answer 2

查看jquery文档。 Jquery是一个包含在页眉中的JavaScript库。它为使用DOM提供了大量有用的方法。 jQuery是我最近编写javascript的首选。直接js现在对我来说感觉老了。知道如何有效地使用jQuery（或者至少是一些js库）是每个Web开发人员应该具备的技能。 jQuery提供了类似$（'css-selector-here'）。append（'你要插入的'），。prepend（），。insert.Before（），insertAfter（）和.html（）等方法，其中一个可能适合您的需求。

以下是所有DOM操作方法的列表： http://api.jquery.com/category/manipulation/

Answer 3

我可以澄清你的问题吗？

您将获得以下内容：

<html>
    <body>
        <div id='outer'>
            <div id='inner2'></div>
        </div>
        <div id='inner1'></div>
    </body>
</html>

但你想要的是：

<html>
    <body>
        <div id='outer'>
            <div id='inner2'></div>
            <div id='inner1'></div>
        </div>
    </body>
</html>

只要已经定义了div #external，就可以使用jQuery执行以下操作。快速简便的复制和糊。请试一试！

//If you don't already have jQuery, load it from CDN
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>   
<script type="text/javascript">
    $(document).ready(function() { //Executes after DOM is ready
       $("#outer")
           .append("<div id='inner1'>INNER DIV 1</div>")
           .append("<div id='inner2'>INNER DIV 2</div>");
    });
    </script>

在不使用document.write的情况下，我如何插入当前JS正在执行的DOM节点？

3 个答案: