javascript当中createElement的用法

最新推荐文章于 2026-04-27 14:10:49 发布
转载 最新推荐文章于 2026-04-27 14:10:49 发布 · 3.1k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：https://blog.csdn.net/mark_to_win/article/details/88680323
标签
#javascript # createTextNode #appendChild #className  # createElement
# createElement
本文介绍如何使用JavaScript动态创建HTML元素并附加到页面上，包括设置元素样式、添加文本节点及输入框，并演示了如何获取创建的输入框的值。

例 1.2（CreateP&InputIEFF.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.test {
    background:#0000FF;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload=function(){
var para = document.createElement("p");             
/*马克-to-win：the following statement para.innerHTML="qixy"; also can work.*/
//    para.innerHTML="qixy";
var message = document.createTextNode("hello world");
para.appendChild(message);
    para.className="test";
 /* we must use the following statement, use document.appendChild(para); is wrong.马克-to-win：因为document里同时有head元素和body元素*/
document.body.appendChild(para);
/*the following statement totally can work.*/

    var in1 = document.createElement("input");
    in1.value="abc";
    in1.id = "in1id"
    document.body.appendChild(in1);
    alert(""+document.getElementById("in1id").value);

}
//-->
</SCRIPT>
</HEAD>

<BODY>

</BODY>
</HTML>

更多请见：http://www.mark-to-win.com/tutorial/js_7_createElementappendChild.html

js 用CreateElement动态创建标签示例
12-03
//定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document.createAttribute(“id”); label_id.nodeValue = id; var label_text = document.createTextNode(value); label_var.setAttr
createElement的用法
如果相遇，那么你好哦~
11-09 8162
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
js 使用js的CreateElement方法创建元素、样式表动态引入
02-20 3万+
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "tex
AI Agent技能化开发：基于vargHQ/skills实现多模态生成能力集成
最新发布
weixin_30709061的博客
04-27 784
在AI Agent开发领域，API集成与多模态能力调用是核心挑战。传统SDK集成方式需要开发者处理复杂的接口对接、认证和错误处理，而新兴的Agent Skills开放标准通过技能化封装，将复杂功能转化为可组合、可移植的标准化单元。这一技术范式允许开发者通过自然语言指令直接调用AI能力，无需编写底层胶水代码，极大提升了开发效率。其技术价值在于实现了工具无关性和去中心化，使得同一技能能在Claude Code、Cursor等多种AI开发环境中无缝运行。在应用场景上，该模式特别适用于快速集成视频生成、图像合成、语
JS中document.createElement()的用法
【Erica W】有问题，就问神奇海螺吧！
11-12 1万+
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中**创建一个对象**，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插
创建元素节点createElement
qq_23337175的博客
08-01 1万+
  createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。 我们来创建一个按钮，代码如下： &l...
js createElement()，setAttribute()用法
wu118765783的博客
09-19 4143
大家好，我是wu118765783
javascript的createElement用法
zhdd1234的专栏
03-05 1294
javascript的createElement用法 var o = document.body; //创建链接 function createA(url,text) {     var a = document.createElement("a");     a.href = url;     a.innerHTML = text;     a.style.color = "
JavaScript基础：动态操作元素（createElement、appendChild、insertBefore、removeChild等方法的应用）
Alley_Olive的专栏
07-07 3334
JavaScript基础：动态操作元素（方法：createElement、appendChild、insertBefore、removeChild，属性：firstChild、lastChild、childNodes）
Vue 中 createElement 使用详解
热门推荐
陆小森_红齐飘飘的博客
09-02 4万+
test
javaScript节点、事件
qq_74813060的博客
11-09 1135
事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程叫事件流例如：给idiv绑定一个事件，时间流顺序如下。
javascript createelement_JavaScript学习4
weixin_39762464的博客
11-21 535
AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。这就...
JavaScript常用DOM API研究详解02_createElement、createTextNode、appendChild、removeChild、replaceChild
qq_33546823的博客
10-15 1605
方法用于创建指定的HTML元素。这是动态添加新元素的第一步，通过此方法可以创建任何有效的HTML标签。方法用于创建包含指定文本的文本节点。文本节点是DOM树中的叶节点，用于存储纯文本。方法用于将一个节点添加为指定父节点的最后一个子节点。此方法是将新创建的元素或文本节点插入到DOM中的主要方式。方法用于从DOM中删除指定的子节点。方法用于用一个新节点替换指定的子节点。：创建新的元素节点。：创建新的文本节点。：将节点添加为父节点的最后一个子节点。：从父节点中移除指定的子节点。
添加元素
weixin_40442639的博客
03-22 1029
createElementById() 创建一个元素后，添加到父元素的中，用appendChilde添加到元素之中 var ul1 = document.getElementById(“ul1”); //创建的li 元素添加到父元素的最后 var newLi = document.createElement(“li”); newLi.innerText = “我是新建的li元素”; ul1.app...
JS自定义元素节点/属性的使用 createElement、setAttribute、getAttribute、appendChild
weixin_49602426的博客
08-27 3403
顾名思义，自定义也就是自己创建一个，通过JS生成节点或者属性，而不是在html里写的。setAttribute(name, value)：设置/添加元素节点的属性，有则设置，无则添加；获取元素节点的属性；removeAttribute：清除属性；...
在js中使用createElement创建HTML对象和元素
hgc0221的博客
10-20 3万+
在js中使用createElement创建HTML对象和元素
JS基础（三）
S788977SS的博客
05-26 302
dom及事件的相关知 向父节点中添加一个新子节点 整体效果，创建一个广州节点，添加到#city下 将一个新建元素节点插入到指定元素节点前 使用innerHTML也可以完成 DOM的增删改的相关操作，可以二者结合使用 如： 添加删除记录-删除 以下面的例子展示： 添加删除记录-增加 上面创建tr元素有另外一个办法 注意这里别直接在tbody中添加tr，因为当写成往tbody中添加元素时，点击提交后虽然也会添加新的tr但是这时整个tbody中的tr都是替换了原先的tr的，这时为原先tr添
使用js动态创建元素createElement的使用
爬楼梯的前端小白的博客
01-24 1684
使用js动态创建元素createElement的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值