Question

我试图制作一个HTML页面，并提供了一种简单的方法来创建复杂的元素，该元素返回一个DOM元素。但是我不知道如何将元素附加到适当的位置。例如，我想在<body>的段落之间使用函数，但是我不知道怎么做。

这里是一个例子：

<body>
p1
<br>
p2
<br>
<script>document.getlocation().append(DOM element)</script>
<br>
p3
</body>

应该产生

p1
p2
DOM element
p3

任何帮助，包括文档和/或代码等，都将不胜感激

Answer 1

您需要在html中创建一个标签，以在其中插入元素或文本。抓住它，然后更改innerHTML或追加子代。如果是后者，则可能要使用p或div标签而不是span。

var sp = document.getElementById('here');
sp.style.display='block';
sp.innerHTML='DOM Element';

<body>
p1
<br>
p2
<br>
<span id='here'></span>
p3
</body>

Answer 2

您可以使用document.write。

<body>
p1
<br>
p2
<br>
<script>document.write('<p>DOM Element</p>');</script>
<br>
p3
</body>

Answer 3

查看所需的结果后，我发现您的代码中存在多个错误。首先，DOM element必须用单引号或双引号引起来，以将其视为字符串。

第二，document.getlocation()不是函数。将'DOM element'放置在被称为使用document.write()的脚本的位置的实际操作。

<body>
p1
<br>
p2
<br>
<script>document.write('DOM element');</script>
<br>
p3
</body>

这将成功提供所需的输出。与PHP中的echo类似，document.write()可用于将数据写入调用脚本的文档中。

Answer 4

我会给您的每个HTML元素一个ID，然后按照下面的代码进行操作。我给了您2个示例方法和尝试文档的链接。希望能有所帮助：）

<!DOCTYPE html>
<html>
<body>
    <p id="id1">p1</p>
    <br id="id2">
    <p id="id3">p2</p>
    <br id="id4">
    <br id="id5">
    <p id="id6">p3</p>

    <script>

        // Example 1: create element and insert before another element:
        // See: https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
        let newElement1 = document.createElement('p');
        newElement1.innerText='New paragraph 1';

        let el3 = document.getElementById('id3');
        document.body.insertBefore(newElement1, el3);

        // Example 2: create an element and use the insertAdjacentElement function:
        // See: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
        let newElement2 = document.createElement('p');
        newElement2.innerText='New paragraph 2';

        let el5 = document.getElementById('id5');
        el5.insertAdjacentElement('afterend', newElement2);

    </script>
</body>
</html>

有没有一种方法可以获取调用脚本标签的位置？

4 个答案: