如何在 JS 和 DOM 中创建元素、设置属性、使用 innerHTML 和 appendChild
Posted
技术标签:
【中文标题】如何在 JS 和 DOM 中创建元素、设置属性、使用 innerHTML 和 appendChild【英文标题】:How to create elements, set attribute, use innerHTML, and appendChild with JS and DOM 【发布时间】:2019-06-06 20:01:42 【问题描述】:我正在用 html/JS 编写一个示例程序来演示创建用户定义对象(属性/值)的数组、创建元素、使用 innerHTML 从对象数组添加数据,然后将新填充的元素附加到使用 appendChild() 打印它;
由于某种原因,运行程序除了我硬编码为调试之外没有提供任何输出。鉴于语言,查看源代码也不是很有帮助。
请原谅我这个简单的问题,我是 JS 新手,并且花了很多时间阅读许多资源 - 我觉得我可能遗漏了一些小东西。
谢谢!!
<title>
This is my title.
</title>
<body>
<p>xXx<br/></p>
<script>
var array = new Array();
var thing1 =
property: "value-1"
;
var thing2 =
property: "value-2"
;
array.push(thing1);
array.push(thing2);
for (index = 0; index < array.length; ++index)
test_el = document.createElement("p");
test_el.innerHTML(array[index].property);
document.body.appendChild(test_el);
;
//I wish to print 'value' text into the body from my object, that is all
</script>
</body>
【问题讨论】:
您的变量是test_el
,但您附加了text_el
。我想这会在控制台中引发错误吗?
啊-谢谢!好眼力。不幸的是 - 修复后我仍然得到一个空白屏幕。这应该很容易运行,不是吗?
你看过你的控制台了吗?你有一个错误:“Uncaught TypeError: test_el.innerHTML is not a function”。您可以通过 .innerHTML = ...
而不是 innerHTML( ... )
来更改元素的 HTML。
我不知道我能做到这一点!得到它的工作。我爱你。
控制台是你最好的朋友!在您的页面上按F12
以查看它(或在Chrome 中按CTRL
+ SHIFT
+ J
)。例如,如果您想跟踪某物的价值,可以使用console.log(test_el)
。
【参考方案1】:
您的错误似乎与innerHTML
有关,这不是一个函数,因此您应该将该值设置为等于某个值。我已经更正了您的代码,以便您查看结果。
var array = new Array();
var thing1 =
property: "value-1"
;
var thing2 =
property: "value-2"
;
array.push(thing1);
array.push(thing2);
for (index = 0; index < array.length; ++index)
test_el = document.createElement('p');
test_el.innerHTML = array[index].property;
document.body.appendChild(test_el);
;
<title>
This is my title.
</title>
<body>
<p>xXx<br/></p>
</body>
【讨论】:
是的,这个,以及 Tyler Roper 的回应,帮助一大群人弄清楚我的真实世界计划。谢谢!以上是关于如何在 JS 和 DOM 中创建元素、设置属性、使用 innerHTML 和 appendChild的主要内容,如果未能解决你的问题,请参考以下文章
在 JavaScript 中创建大型静态 DOM 元素的最佳方法?
如何从 DOM 元素和选择器的混合中创建 JQuery 容器
js中创建img元素追加src属性添加图片 运行HTML图片不能加载