js设置li元素的内容(JS中动态创建元素的三种方法总结(推荐))

1.JS中动态创建元素的三种方法总结(推荐)

1、动态创建元素一 document。

write()例如向页面中输出一个 li 标签body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容2、动态创建元素二 innerHTMLdiv标签中就会插入一个p标签,并在在页面上输出“这是标签”,当需要添加的标签比较多的时候使用这种方式。 3、动态创建元素三 document。

createElement()div标签下面就会创建了一个li标签,当需要动态创建的标签比较少的时候就使用这种方式以上就是小编为大家带来的JS中动态创建元素的三种方法总结(推荐)全部内容了,希望大家多多支持脚本之家~。

js设置元素属性,js设置元素高度,js设置元素隐藏

2.JavaScript设置元素的样式是什么?

可以通过JavaScript使用元素的setAttribute方法设置元素的样式,例如: 要把Span元素中的文本修改为采用红色粗体显示,设置如下: var spanElement = document。

getElementById("mySpan"); spanElement。 setAttribute("style","font-weight:bold;color:red;"); 除了IE,这种方法在当前其他浏览器上都是行得通的。

对于IE,解决方法是使用元素style对象的cssText属性来设置所需的样式, 尽管这个属性不标准,但得到了广泛的支持,如下所示: var spanElement = document。 getElementById("mySpan"); spanElement。

style。cssText = "font-weight:bold;color:red;"; 这种方法在IE和大多数其他浏览器上都能很好地工作,只有Opera除外, 为了让代码能在所有当前浏览器上都可以移值,可以同时使用这两种方法,如下所示: var spanElement = document。

getElementById("mySpan"); spanElement。setAttribute("style","font-weight:bold;color:red;"); spanElement。

style。cssText = "font-weight:bold;color:red;";。

元素,设置,内容,js

3.js中怎样动态添加一个li

这是使用js增加li的示例,供您参考:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js增添li元素</title>

</head>

<body>

<ul id='ul1' onClick="add()">

<li>;点击这里增加一个li行</li>

</ul>

<script>

var cnt = 1; // 用于行计数

function add() {

var elem_li = document.createElement('li'); // 生成一个 li元素

elem_li.innerHTML = '这是增加的一行' + cnt ++; // 设置元素的内容

document.getElementById('ul1').appendChild(elem_li); // 添加到UL中去

}

</script>

</body>

</html>;运行结果:

4.js 改变li的值

document.getElementById('li').getElementsByTagName("li")这个表达是获取的是DOM对象,不能赋值给DOM对象,这样会报错。

你想改变标签内部的值的时候可以这样写:

var obj = document.getElementById('li').getElementsByTagName("li");

obj.innerText = "123" 标准属性

或者

obj.innerHTML = "123" 针对IE浏览器

5.用javascript创建ul>li>a

<div id="test"></div>

<script>

var ul = document.createElement('ul');

var ids = ['aaa','bbb'];//id数组

var hrefs = ['#a','#b'];//链接数组

var vals = ['a','b'];//显示内容数组

for(var i=0;i<2;i++){

var li = document.createElement('li');

var a = document.createElement('a');

a.setAttribute('href',hrefs[i]);

a.id = ids[i];

a.innerHTML = vals[i];

li.appendChild(a);

ul.appendChild(li);

}

test.appendChild(ul);//test 和 document.getElementById('test') 在这里是一样的 浏览器通用 看自己习惯

</script>

js设置li元素的内容

转载请注明出处JS代码网 » js设置li元素的内容(JS中动态创建元素的三种方法总结(推荐))

资讯

js中的call和apply的用法(Javascript中call和apply的区别与详解)

阅读(5)

本文主要为您介绍js中的call和apply的用法,内容包括Javascript中call和apply的区别与详解,js中的call和apply方法的区别,js中的call和apply方法的区别。每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。听

资讯

js写电商网站的各种功能(启用多进程webview这个有什么用)

阅读(7)

本文主要为您介绍js写电商网站的各种功能,内容包括用JavaScript库做电子商务网站的优缺点是什么?,启用多进程webview这个有什么用,用JavaScript库做电子商务网站的优缺点是什么。主要是用来加载网页的 如果你做浏览器相关的应用,肯定要使用w

资讯

js嵌套的对象进行ajax请求(JS如何实现Ajax的请求函数)

阅读(5)

本文主要为您介绍js嵌套的对象进行ajax请求,内容包括JS如何实现Ajax的请求函数,详解JavaScript实现设计模式中的适配器模式的方法,AJAX核心中的XMLHttpRequest对象是什么?。<script type="text/javascript"> <br> //请求函数 <br> function f

资讯

python爬虫js加载的数据(Python怎么获取js动态加载的数据)

阅读(6)

本文主要为您介绍python爬虫js加载的数据,内容包括Python怎么获取js动态加载的数据,谁能科普一下搜索引擎对js加载的数据是如何抓取的呢?,如何用python爬取网页中隐藏的div内容。利用WebBrowser控件来获取js动态加载的数据:首先,我要在Docume

资讯

js得到input的文件(js文件里如何获取input的的值)

阅读(6)

本文主要为您介绍js得到input的文件,内容包括js文件里如何获取input的的值,javascript基础问题:得到inputtext里上的内容,inputfile在js里获取文件内容。根据id获取input节点2、通过value获取input的值示例:<body><input id=r1 type=text va

资讯

python爬去js加载的数据库(爬虫怎么爬取js后面加载的数据)

阅读(6)

本文主要为您介绍python爬去js加载的数据库,内容包括爬虫怎么爬取js后面加载的数据,有必要参加python培训班吗?,如何用python爬取网页中隐藏的div内容?。推荐个很好用的软件,我也是一直在用的,就是前嗅的ForeSpider软件,他有自己编写的脚本语

资讯

js中的call和apply的用法(Javascript中call和apply的区别与详解)

阅读(5)

本文主要为您介绍js中的call和apply的用法,内容包括Javascript中call和apply的区别与详解,js中的call和apply方法的区别,js中的call和apply方法的区别。每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。听

资讯

js写电商网站的各种功能(启用多进程webview这个有什么用)

阅读(7)

本文主要为您介绍js写电商网站的各种功能,内容包括用JavaScript库做电子商务网站的优缺点是什么?,启用多进程webview这个有什么用,用JavaScript库做电子商务网站的优缺点是什么。主要是用来加载网页的 如果你做浏览器相关的应用,肯定要使用w

资讯

js嵌套的对象进行ajax请求(JS如何实现Ajax的请求函数)

阅读(5)

本文主要为您介绍js嵌套的对象进行ajax请求,内容包括JS如何实现Ajax的请求函数,详解JavaScript实现设计模式中的适配器模式的方法,AJAX核心中的XMLHttpRequest对象是什么?。<script type="text/javascript"> <br> //请求函数 <br> function f

资讯

python爬虫js加载的数据(Python怎么获取js动态加载的数据)

阅读(6)

本文主要为您介绍python爬虫js加载的数据,内容包括Python怎么获取js动态加载的数据,谁能科普一下搜索引擎对js加载的数据是如何抓取的呢?,如何用python爬取网页中隐藏的div内容。利用WebBrowser控件来获取js动态加载的数据:首先,我要在Docume

资讯

macnode.js的run是灰的(Macpro安装node.js失败,怎么解决)

阅读(6)

本文主要为您介绍macnode.js的run是灰的,内容包括Macpro安装node.js失败,怎么解决,我宝宝三个月了,现在完全喝羊奶粉,但是大便现在是灰黑色的,是怎,不能安装vmtools,虚拟机打开了,一直是灰色的。window下:Linux下:#!/bin/bash#检查是否已经安