一、JS添加style
在HTML中，我们可以通过以下方式来添加样式表：
<head> <style> /*在这里添加样式表代码*/ </style> </head>
但是如果我们想要动态地添加CSS样式，就需要使用JavaScript。我们可以通过以下方法来实现：
/*获取head部分*/
var head=document.getElementsByTagName('head')[0];
/*创建一个style标签*/
var style=document.createElement('style');
/*添加样式代码*/
style.type='text/css';
style.innerHTML='body{color:red}';
/*将style标签添加到head中*/
head.appendChild(style);
在上面的代码中，我们先通过getElementsByTagName()方法获取了head元素。然后使用createElement()方法创建了一个style标签，接着通过innerHTML属性添加了CSS代码。最后将style标签添加到head元素中。
二、JS添加Style的内容
在JS中，添加CSS样式，我们可以使用以下几种方法：
1.通过style属性添加样式
/*获取元素*/
var box=document.getElementById('box');
/*添加样式*/
box.style.width='200px';
box.style.height='200px';
box.style.backgroundColor='red';
在上面的代码中，我们先通过getElementById()方法获取了id为box的元素。然后使用style属性添加样式。
2.通过setAttribute()方法添加样式
/*获取元素*/
var box=document.getElementById('box');
/*添加样式*/
box.setAttribute('style','width:200px; height:200px; background-color:red;');
在上面的代码中，我们同样是先通过getElementById()方法获取了id为box的元素。然后使用setAttribute()方法添加样式。
3.通过className属性添加样式
/*获取元素*/
var box=document.getElementById('box');
/*添加样式*/
box.className='box';
在上面的代码中，我们同样是先通过getElementById()方法获取了id为box的元素。然后使用className属性添加样式。其中，.box为在样式表中定义的box类，通过动态地添加className属性，就可以为元素添加样式。
三、JS添加CSS样式
除了上面提到的添加样式的方法，我们还可以通过直接给元素添加style属性来添加CSS样式：
/*获取元素*/
var box=document.getElementById('box');
/*添加样式*/
box.style.width='200px';
box.style.height='200px';
box.style.backgroundColor='red';
在上面的代码中，我们通过获取id为box的元素，然后直接给它添加style属性，并赋以值来添加CSS样式。
四、JS添加兄弟元素
我们可以通过以下两种方式，添加兄弟元素：
1.使用insertBefore()方法
/*获取元素*/
var box=document.getElementById('box');
/*创建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的兄弟元素';
/*获取box的父节点*/
var parent=box.parentNode;
/*添加兄弟元素*/
parent.insertBefore(newBox,box.nextSibling);
在上面的代码中，我们先通过getElementById()方法获取了id为box的元素，然后通过createElement()方法创建了一个新元素newBox，并设置innerHTML属性的值。接着，通过parentNode属性获取box元素的父节点，最后通过insertBefore()方法将newBox元素添加到box元素的下一个兄弟节点中。
2.使用insertAdjacentHTML()方法
/*获取元素*/
var box=document.getElementById('box');
/*添加兄弟元素*/
box.insertAdjacentHTML('afterend','<div>我是添加的兄弟元素</div>');
在上面的代码中，我们同样是先通过getElementById()方法获取了id为box的元素。然后使用insertAdjacentHTML()方法添加新元素，其中第一个参数afterend表示在元素的后面添加，第二个参数是要添加的HTML代码。
五、JS添加节点
我们可以使用以下两种方式来添加节点：
1.使用appendChild()方法
/*获取元素*/
var parent=document.getElementById('parent');
/*创建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的节点';
/*添加节点*/
parent.appendChild(newBox);
在上面的代码中，我们先通过getElementById()方法获取了id为parent的元素，然后通过createElement()方法创建了一个新元素newBox，并设置innerHTML属性的值。最后通过appendChild()方法将newBox元素添加到parent元素中。
2.使用insertBefore()方法
/*获取元素*/
var parent=document.getElementById('parent');
/*创建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的节点';
/*添加节点*/
parent.insertBefore(newBox,parent.firstChild);
在上面的代码中，我们同样是先通过getElementById()方法获取了id为parent的元素，然后通过createElement()方法创建了一个新元素newBox，并设置innerHTML属性的值。最后通过insertBefore()方法将newBox元素添加到parent元素的最前面。
六、JS添加标签
我们可以使用以下代码来动态添加HTML标签：
/*获取元素*/
var parent=document.getElementById('parent');
/*添加标签*/
parent.innerHTML+='<div>我是添加的标签</div>';
在上面的代码中，我们先通过getElementById()方法获取了id为parent的元素，然后通过innerHTML属性动态添加HTML标签。
七、JS添加div
我们可以使用以下代码来动态创建并添加一个div元素：
/*获取元素*/
var parent=document.getElementById('parent');
/*创建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加的div元素';
/*添加元素*/
parent.appendChild(newBox);
在上面的代码中，我们同样是先通过getElementById()方法获取了id为parent的元素，然后通过createElement()方法创建了一个新div元素newBox，并设置innerHTML属性的值。最后通过appendChild()方法将newBox元素添加到parent元素中。
八、JS添加DOM
我们可以使用以下代码来动态添加DOM元素：
/*获取元素*/
var parent=document.getElementById('parent');
/*创建要添加的DOM元素*/
var newBox=document.createTextNode('我是添加的DOM元素');
/*添加元素*/
parent.appendChild(newBox);
在上面的代码中，我们同样是先通过getElementById()方法获取了id为parent的元素，然后通过 createTextNode()创建一个文本类型的节点newBox，并设置节点的内容。最后通过appendChild()方法将newBox节点添加到parent元素中。
九、JS添加样式
我们可以使用以下代码来为元素添加样式：
/*获取元素*/
var box=document.getElementById('box');
/*添加样式*/
box.style.color='red';
box.style.fontSize='16px';
box.style.fontWeight='bold';
在上面的代码中，我们先通过getElementById()方法获取了id为box的元素，然后使用style属性来添加CSS样式。
十、JS添加id属性选取
我们可以通过以下代码来动态添加id属性并选取元素：
/*创建要添加的元素*/
var newBox=document.createElement('div');
newBox.innerHTML='我是添加了id的元素';
/*添加id属性*/
newBox.id='newBox';
/*获取元素*/
var element=document.getElementById('newBox');
在上面的代码中，我们通过createElement()方法创建了一个新元素newBox，并设置innerHTML属性的值。然后通过id属性添加id属性。最后通过getElementById()方法获取id为newBox的元素。
