个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
你好，我是新来的，正在尝试 DOM 创建，但是我遇到了 appendChild 的奇怪问题，而第一次尝试和第二次尝试都有效，但第三次我完全不知道。这是我的 HTML:
<html>
<head>
<title>Tugas Anchor DOM!</title>
</head>
<body>
<div id="main">
</div>
<script src="script.js"></script>
</body>
</html>
我将使用 DOM 将 HTML 转换为:
<html>
<head>
<title>Tugas Anchor DOM!</title>
</head>
<body>
<div id="main">
<div id="content">
<div class="content-post">
<h1>Judul Post</h1> <!-- IM STUCK HERE -->
<button class="share-post-btn">Share this Post</button>
</div>
<div class="content-post">
<h1>Judul Post 2</h1>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
但我坚持为 h1 创建一个新的appendChild，这也是 DOM 的另一个 newChild。这是我的js:
var menu = document.getElementById("main");
var mainDiv = document.createElement("div");
var newDiv1 = document.createElement("div");
var newDiv2 = document.createElement("div");
var newH1 = document.createAttribute("h1");
var newButton = document.createAttribute("button");
var createId = document.createAttribute("id");
var createAtt = document.createAttribute("class");
createId.value ="content";
createAtt.value = "content-post";
//top
mainDiv.setAttributeNode(createId);
menu.appendChild(mainDiv);
//1st
newDiv1.setAttribute('class','content-post');
mainDiv.appendChild(newDiv1);
var judul1 = newDiv1.appendChild(newH1); //appendChild can't be executed here ?
// judul1.innerHTML = "Judul Post";
//2nd
newDiv2.setAttribute('class','content-post');
mainDiv.appendChild(newDiv2);
最佳答案
对于h1、span、p，您应该使用document.createElement而不是document.createAttribute
你应该这样做:
var mainDiv = document.getElementById('main');
var contentDiv = document.createElement('div');
var contentPostDiv1 = document.createElement('div');
var contentPostDiv2 = document.createElement('div');
var judul1 = document.createElement('h1');
var judul2 = document.createElement('h1');
var button = document.createElement('button');
contentDiv.setAttribute('id', 'content');
mainDiv.appendChild(contentDiv);
contentPostDiv1.setAttribute('class','content-post');
contentPostDiv2.setAttribute('class','content-post');
contentDiv.appendChild(contentPostDiv1);
contentDiv.appendChild(contentPostDiv2);
judul1.innerHTML = 'Judul Post'
button.setAttribute('class', 'share-post-btn');
button.innerHTML = 'Share this Post'
contentPostDiv1.appendChild(judul1);
contentPostDiv1.appendChild(button);
judul2.innerHTML = 'Judul Post 2';
contentPostDiv2.appendChild(judul2);
关于javascript - JS-DOM-creation 、appendChild 无法执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41004572/
24
4
0
从逻辑上讲，我想在 div 的链接中嵌入图像。我已经使用链接或图像成功完成了此操作。为了我的目的，我什至并行地使用了链接和图像(这是无用的)。但似乎无法将图像包裹在 div 内的链接中。 var di
我需要将特殊的 iconfont 子节点插入到基础文档中。 我需要的字符序列是“fT”，我将它包裹在一个跨度中，为它提供我想要的字体的颜色和大小。 问题是我附加此“注释”子项的基本文档的父节点有时可能
我正在学习 appendChild 并且到目前为止想出了这段代码: var blah = "Blah!"; var t = document.createElement("table"), tb
我想通过同一页面上的按钮和事件处理程序将相同的内容重复附加到元素。 我遇到的问题是它只在第一次有效。它第一次做的正是我想要的，然后在随后的按钮按下时什么也做不了。我查了一下，似乎在第一次追加之后，“n
我正在尝试在 JavaScript 中创建一个元素并按类名将其应用于所有元素。对于这个例子，我将使用一个段落来方便。然而，通过 JavaScript 创建元素的目的是因为我想稍后在我的代码中创建一个不
我正在尝试输入一个问题，并将该问题显示为表单“调查表单”中的一个元素。但是，当我使用 JavaScript 将子节点附加到“调查表单”时，文本会出现半秒然后消失。似乎标签元素被附加但随后被删除。知道如
请参阅here . 我们有这样的 JavaScript 代码: document.addEventListener("DOMContentLoaded", function(event) { le
所以我尝试向单选按钮输入添加属性，特别是 Javascript 中的名称属性。我将子对象附加到主对象，并且当我使用 Object.setAttribute("name", value); 时然后检查附
我下面有 JS，一旦单击图像下方的图像，我会尝试显示菜单项，一旦单击某个项目，它就会消失。我有多个图像，这就是我构建这个动态内容菜单的原因。我计划在 userMenuContent 中添加一堆 htm
根据文档https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild 、appendChild 将一个节点添加到指定父节点的子节点列表的末
我正在尝试以类似表格的方式打印出所有数组项。我正在创建一个 标题标签，以及 数组中每个元素的标签(与 headers 数组分开)。每当我尝试这样做时，我都会得到预期的结果，但所有数组元素都只是一个长字
有几个问题与同一段代码相关，包括这个:Understanding JavaScript Styling同样，这摘自本书Secrets of the JavaScript Ninja
所以我有一个 div 元素，它将使用 appendChild 方法动态填充其他 div，这应该显示一个列表。用户现在可以使用 JqueryUI Sortable 选项对该列表进行排序。 我还添加了一些
我正在尝试使用超链接将一些 HTML 数据插入 div 标记，单击超链接时会调用 Javascript 函数。 HTML 数据有效，我要显示的项目出现，但执行后立即消失。 我尝试过 event.pre
除了 saved 变量中列出的这些元素之外，以下代码删除特定元素的所有子元素。 let rightCol = document.querySelector("#rightCol"); let save
我的代码是为了添加另一段hello单击“新建”按钮后，在现有的 2 个下。 错误一定是在传递来自onclick 的值时发生的函数或 createTextNode或 appendChild() (不是在
appendChild()函数属于什么对象？ 最佳答案 一个 DOM 节点/元素。 interface Node { // NodeType const unsigned short
嘿，我正在尝试 appendChild() 两个连续的 div，但我期望的结果是它们并排放置，但它们像这样一个在另一个之上: 1st div 2nd div 代替第一格第二格 var addBudCo
我正在使用 Google Maps Javascript 创建 map 。我需要对本创建的每个标记进行计数，并将此计数放在一个 DIV 中。scipt 收集计数，但它显示每个标记的计数。例如，如果查询
当我将一个 div 发送到一个为文档片段创建内容的函数时，当我将该片段附加到 div 时，它会向我提供此错误。 Object column_left has no method 'appendChil
我是一名优秀的程序员,十分优秀！