如何用js在页面中添加元素?
发布网友
发布时间：2022-04-25 05:52
共9个回答
热心网友
时间：2022-04-07 07:25
1.首先创建html结构，如下图所示，一个input元素，一个按钮，一个空的ul列表。
2.然后添加按钮点击事件，如下图所示，在按钮点击事件中获得input元素。
3.通过value属性我们可以获得用户在input中输入的内容，如下图所示。
4.下面我们来动态创建一个li元素，如下图所示，运用document中的createElement方法即可。
5.创建好li元素以后，下面要做的就是给其设置innerHTML内容，如下图所示。
6.接下来就是获取ul元素了，如下图所示，仍然用getElementById方法。
7.最后通过调用appendChild方法将创建的li元素添加到ul列表中，如下图所示。
热心网友
时间：2022-04-07 08:43
object.insertAdjacentHTML(sWhere, sText)
在指定位置的元素中插入给定的 HTML 文本。
beforeBegin
afterBegin
beforeEnd
afterEnd
例：document.body.insertAdjacentHTML(beforeEnd,"<a></a>")
扩展资料：
添加元素中用到的c语言
1、append():前面是被插入的对象，最后面增加子元素，父子级关系。
2、appendto():后面是被插入对象，最后面增加子元素，父子级关系。
3、prepend():前面是被插入对象，最前面增加子元素，父子级关系。
4、prependTo():后面是插入对象，最前面增加子元素，父子级关系。
5、before():前面是插入对象，之前增加元素，同级关系。
6、after():前面是插入对象，之后加入元素，同级关系。
7、insertbefore():后面是插入对象，之前加入元素，同级关系。
8、insertafter():后面是插入对象，之后加入元素，同级关系。
热心网友
时间：2022-04-07 10:18
使用HTML DOM appendChild() 方法实现元素的添加。
函数解析及实例实现过程如下：
1、定义和用法：
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。
如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
可以使用 appendChild() 方法移除元素到另外一个元素。
2、创建一个简单的的html代码，如下：
3、设计一个函数，通过此函数可以在目标元素内添加新的标签元素。
4、此时的页面展示如下：
5、点击按钮，实现元素添加：
6、查看此时dom节点：（已加入a标签）
热心网友
时间：2022-04-07 12:09
想要在页面动态添加元素，首先要确定在哪个元素后面添加元素，然后利用js的appendChild方法在该元素后面追加元素。
1.获取父节点元素var body = document.getElementsByTagName('body')[0]。
2.然后动态创建a标签var a = document.createElement('a')。
3.把创建好的a标签追加到body下面body.appendChild(a)。
4.在a标签里面添加文本内容a.innerHTML = '这是一个链接'。
5.给a标签添加一个链接a.href = 'https://www.baidu.com/'。
扩展资料：
js一些原生方法
element.appendChild()方法向节点添加最后一个子节点。
element.innerHTML设置或返回元素的内容。
document.getElementsByTagName()返回带有指定标签名的对象集合。
document.getElementById()返回对拥有指定 id 的第一个对象的引用。
document.createElement()通过指定名称创建一个元素。
热心网友
时间：2022-04-07 14:17
js代码中有个data要放入已经封装好的js对象grid（dojo对象类似aspx中的DataList、gridView），想让显示的表格单元中的某一列变成链接，从网络中查到如下方法，但是这里就算创建出网页元素a，但是他还是要appendChild到某一个已有的网页元素中，这里没有这样的网页元素，
1.创建链接
1 <script language="javascript">
2 var o = document.body;
3 //创建链接
4 function createA(url,text)
5 {
6 var a = document.createElement("a");
7 a.href = url;
8 a.innerHTML = text;
9 a.style.color = "red";
10 o.appendChild(a);
11 }
12 createA("http://www.webjx.com/","网页教学网");
13 </script>
扩展资料
添加元素中用到的c语言：
while(scanf("%d",&n)!=EOF&&n==0) //表示你一直可以输入 整型 的数字 知道你输入 数字为0结束
while(scanf("%d %d",&n,&m)!=EOF&&n==0||m==0) //表示你一直可以输入 整型 的数字 直到m和n
都是0 结束。while(scanf("%d %d",&n,&m)!=EOF&&n==0&&m==0) //表示你一直可以输入 整型 的数字 直到m和n中有一个数字 或者都为 0 结束。
参考资料:百度百科-JavaScript
热心网友
时间：2022-04-07 16:42
<div id="d">
<a>111</a>
<a>222</a>
</div>
<script>
docuemtn.getElementById("d").getElementByTagName("a")[0].setAttribute("class","class名称");
</script>
js添加的元素和页面中原有的元素,对于jquery来说是一样的。
比如：documnet.getElementById("id").innerHtml='<div id="d"></div>；
上面代码向id为id的元素中添加了一个div元素。
对于jquery来说可以正常获取:$("#d")。
扩展资料：
javascript使用注意事项：
简化代码
例如：创建对象
之前是这样的：
Var car = new object();
Car.color = “red”;
Car.wheels = 4;
Car.age = 8;
而现在可以写成这样子：
Var car = {color:'red', wheels:4, age:8}
例如：创建数组
之前是这样的：
Var studentArray = new Array(‘zhangsan', 'lisi', ‘zhaowu', ‘wuliu');
而现在可以写成这样子：
Var studentArray = {‘zhangsan', ‘ lisi', ‘zhaowu', ‘wuliu'};
尽量使用JavaScript原生函数
例如：获取一组数据中的最大值
var maxData = Math.max(0,20,50,10);
alert(maxData); //返回的最大值为50
代码可配置
你写的代码如果想让别人更容易进行使用或者修改，则需要可配置，解决方案是在你写的脚本中增加一个配置对象。要点如下：
1、在你的脚本中新增一个叫configuration的对象。
2、在配置对象中存放所有其它人可能想要去改变的东西，例如CSS的ID、class名称、语言等等。
3、返回这个对象，作为公共属性以便其它人可以进行重写。
代码兼容性
兼容性是初学者容易忽略的部分，通常学习Javascript的时候都是在某个固定的浏览器中进行测试，而这个浏览器很有可能就是IE，这是非常致命的，因为目前几大主流浏览器中偏偏IE对标准的支持是最差的。
最终用户看到的结果也许就是，你写的代码在某个浏览器无法正确运行。你应该把你的代码在主流的浏览器中都测试一下，这也许很费时间，但是应该这样做。
参考资料来源：百度百科--javascript
热心网友
时间：2022-04-07 19:23
方法1
object.insertAdjacentHTML(sWhere, sText)
在指定位置的元素中插入给定的 HTML 文本。
beforeBegin
afterBegin
beforeEnd
afterEnd
例：document.body.insertAdjacentHTML(beforeEnd,"<a></a>")
方法2
object.appendChild(oNode)
给对象追加一个子元素。
例：
var newObj=document.createElement("<a></a>");
newObj.innerText="内容"；
document.body.appendChild(newObj);
代码我就是顺手学的，没有测试过，可能有错误。
热心网友
时间：2022-04-07 22:21
var mask = document.createElement("div");//js新建元素
mask.setAttribute("id", "maskDiv");//给元素加id
mask.onclick = hideMask;//给元素添加点击事件
var img = document.createElement("img");
img.style.float = "right";//js设置样式
img.src = "http://520.com/images/download_android.png";
img.style.width = "320px";
img.style.float = "right";
mask.appendChild(img);
document.body.appendChild(mask);//把元素放进body标签里面
热心网友
时间：2022-04-08 01:36
document.write("<a href='utl'></a>");
