使用 JavaScript 向网页中添加元素

最新推荐文章于 2024-04-26 16:47:03 发布

kllo__

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.2k

点赞数 1

分类专栏： javascript 文章标签： javascript html linq

本文链接：https://blog.csdn.net/kllo__/article/details/122842404

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

创建元素


// Create an li element

const pythonElement = document.createElement("li");

设置元素属性

// ...

pythonElement.id = "python";          // Define element ID

pythonElement.textContent = "Python"; // Define its text content

将元素插入 DOM


// Insert the new element into the DOM

document.getElementById("languages").appendChild(pythonElement);

演示

<html>
 <head>
 </head>
 <body>
<h3 class="beginning">Some languages</h3>
<div id="content">
    <ul id="languages">
        <li id="cpp">C++</li>
        <li id="java">Java</li>
        <li id="csharp">C#</li>
        <li id="php">PHP</li>
    </ul>
</div>
  </body>
</html>

向列表中插入 Ruby

const rubyElement = document.createElement("li"); // Create an "li" element
rubyElement.id = "ruby"; // Define element ID
rubyElement.appendChild(document.createTextNode("Ruby")); // Define its text content
document.getElementById("languages").appendChild(rubyElement); // Insert the new element into the DOM

在一个节点之前添加一个节点

const perlElement = document.createElement("li"); // Create an "li" element
perlElement.id = "perl"; // Define element ID
perlElement.textContent = "Perl"; // Define its text content
// Insert the new element before the "PHP" node
document.getElementById("languages").insertBefore(perlElement, document.getElementById("php"));

确定新节点的位置

insertAdjacentHTML() 方法非常精确地定义了插入元素的位置。您可以在现有元素上调用它，并将位置和代表要添加的新内容的HTML字符串传递给它。新内容的位置应该是：

beforebegin：在现有元素之前
afterbegin：在现有元素内，其第一个子元素之前
beforeend：在现有元素内，在其最后一个子元素之后
afterend：在现有元素之后

以下是这些位置相对于 <p> 标签的位置。

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

以下示例用 InsertAdjacentHTML() 将 JavaScript 添加到语言列表顶部。


// Add an element to the beginning of a list

document.getElementById('languages').insertAdjacentHTML("afterBegin", '<li id="javascript">JavaScript</li>');

kllo__

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
使用 JavaScript 向网页中添加元素

创建元素// Create an li elementconst pythonElement = document.createElement("li"); 设置元素属性// ...pythonElement.id = "python"; // Define element IDpythonElement.textContent = "Python"; // Define its text content将元素插入 DOM// I...
复制链接

扫一扫