javascript - 如何使用 JS 和 DOM 创建元素、设置属性、使用 innerHTML 和 appendChild
问题描述
我正在用 HTML/JS 编写一个示例程序,以演示创建用户定义对象(属性/值)的数组、创建元素、使用 innerHTML 从对象数组添加数据,然后附加新填充的元素以使用打印它附加孩子();
出于某种原因,运行程序除了我硬编码为调试之外没有提供任何输出。鉴于语言,查看源代码也不是很有帮助。
请原谅我这个简单的问题,我是 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>
解决方案
您的错误似乎与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>
推荐阅读
- netsuite - 如何在我的 NetSuiite 保存的搜索中添加公式字段以显示发票日期等于到期日的位置
- javascript - ESLint 正在读取其他配置
- javascript - 在 div 列表上添加滚动效果
- python - 在python终端中打印矩形
- c# - 重复元素错误MongoDB .Net Core 3.0
- sql - 如果行不存在,则有条件地插入一行
- sql - 从三个源列获取时从目标列返回输出
- mysql - MySQL:使用 sum in( case when ) 语句显示 0 作为结果
- r - R中lm回归中的预测变量编码
- xamarin.forms - 在 Xamarin.Forms 中访问 Collectionview 数据模板内的元素