Home >Web Front-end >JS Tutorial >By creating tags in js dynamics and setting attribute methods (detailed tutorial)

By creating tags in js dynamics and setting attribute methods (detailed tutorial)

亚连Original: 2018-06-04 17:14:593084browse

Below I will share with you an article about dynamically creating tags through js and setting attributes. It has a good reference value and I hope it will be helpful to everyone.

When we write jsp pages, we often encounter this situation: the number of data obtained from the background is uncertain. At this time, when writing jsp pages on the front end, we are not sure how to design it. At this time, you need to dynamically create tags through js:

1. Create a certain tag: Create an instance of p in the body as follows;

<script>
 function fun(){
 var framep = document.createElement("p");//创建一个标签
 var bodyFa = document.getElementById("bodyid");//通过id号获取framep 的父类（也就是上一级的节点）
 bodyFa .appendChild(framep);//把创建的节点framep 添加到父类body 中；
 }
<script>
<body id="bodyid" >
<!--在此添加p标签-->
</body>

2. Add attributes: Add corresponding attributes to the created tag:

framep .setAttribute("id", "pid");//给创建的p设置id值；
framep .className="pclass"; //给创建的p设置class；
//给某个标签添加显示的值；
var h = document.createElement("h1");
h.innerHTML = data[i].name;
var p = document.createElement("p");
p.innerHTML = "要显示的值";

3. Add events to the created tag:

a. Without parameters:

framep.onmousedown = fun;//ps：函数名fun后面一定不能带括号，否则会在创建标签的时候执行函数， 而不是鼠标按下时执行；

b. With parameters:

framep.onmousedown = function(){ fun(this); }

c. The function to be called;

function fun(){ 
alert("鼠标按下");
}

4. If you are worried that the created tag will not be overwritten, you can replace it:

 var pFlag = document.getElementById("pFlag");
 var pMain = document.createElement("p");
 if(pFlag != null){
 body.replaceChild(pMain, pFlag);//把原来的替换掉
}
pMain.setAttribute("id", "pFlag");

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Implementing the method of adding and assigning tag sub-elements in jQuery

How to change the P tag text in jQuery Value

How to use sass in vue cli webpack (detailed tutorial)

The above is the detailed content of By creating tags in js dynamics and setting attribute methods (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implement the method of adding and assigning tag sub-elements in jQueryNext article：Implement the method of adding and assigning tag sub-elements in jQuery

See more

By creating tags in js dynamics and setting attribute methods (detailed tutorial)

Related articles