javascript添加按钮（某网页有一个ID为mydiv的div层，用javascript写出代码，往该层上动态添加一个button按钮）

本文目录

• 某网页有一个ID为mydiv的div层，用javascript写出代码，往该层上动态添加一个button按钮
• 在JavaScript中动态的添加行数，请问怎么在第四列添加一个按钮
• 就是在网页做一些按钮文本框，输入颜色，宽度，可以直接改变div样式
• 使用Javascript制作声音按钮
• 图文详解JS中如何创建节点和添加节点

某网页有一个ID为mydiv的div层，用javascript写出代码，往该层上动态添加一个button按钮

《script》
var but=document.createElement(’input’);
but.type=’button’;
but.value=’button’;
document.getElementById(’mydiv’).appendChild(but);
《/script》
把上面的代码放在源代码的末尾,这样的方法比前两位好的原因是不改变原来DIV中的内容

在JavaScript中动态的添加行数，请问怎么在第四列添加一个按钮

《!DOCTYPE html》
《html》
  《head》
***隐藏网址***
《title》《/title》
《style》
table{
margin:0 auto;
width:400px;
border-collapse:collapse;
}
caption{
font:bolder 26px ’’;
}
th,td{
border:1px solid gray;
text-align:center;
}
《/style》
《script》
var add=function(){
var arr=;
var tr=tb.insertRow(tb.rows.length-2);
for(var i=0;i《arr.length;i++){
var td=tr.insertCell(tr.cells.length);
if(i《arr.length-1){
td.innerHTML=arr;
}else{
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
var tr=this.parentElement.parentElement;
tb.deleteRow(tr.rowIndex);
}
td.appendChild(btn);
}
}
}
《/script》
  《/head》
《body》
   《table id="tb"》
 《caption》动态创建表格《/caption》
 《tr》《th》姓名《/th》《th》年龄《/th》《th》性别《/th》《th》删除《/th》《/tr》
 《tr》
 《td rowspan=3 colspan=4》
 输入要添加的姓名：《input type="text" id="a" /》《br /》
 输入要添加的年龄：《input type="text" id="b" /》《br /》
 输入要添加的性别：《input type="text" id="c" /》《br /》
 《input type="button" value="添加" onclick="add()" /》
 《/td》
 《/tr》
《tr》
《/table》
  《/body》
《/html》

就是在网页做一些按钮文本框，输入颜色，宽度，可以直接改变div样式

您可以通过JavaScript和CSS实现在网页中添加按钮、文本框等交互式元素，并通过改变相应的CSS属性来改变div样式。下面是一个简单的示例：
首先，在HTML中添加一个div元素和一些交互式元素，例如按钮和文本框：
《div id="mydiv"》这是一个div《/div》
《button onclick="changeColor()"》改变颜色《/button》
《input type="text" id="color" placeholder="输入颜色"》
《input type="text" id="width" placeholder="输入宽度"》
《button onclick="changeStyle()"》改变样式《/button》
接下来，使用JavaScript和CSS实现在点击“改变颜色”按钮时改变div的背景颜色，在点击“改变样式”按钮时改变div的颜色和宽度：
《script》
// 改变颜色
function changeColor() {
var mydiv = document.getElementById("mydiv");
mydiv.style.backgroundColor = "red";
}
// 改变样式
function changeStyle() {
var mydiv = document.getElementById("mydiv");
var color = document.getElementById("color").value;
var width = document.getElementById("width").value;
mydiv.style.backgroundColor = color;
mydiv.style.width = width + "px";
}
《/script》
《style》
#mydiv {
background-color: blue;
width: 200px;
height: 200px;
}
《/style》
在这个示例中，点击“改变颜色”按钮将div的背景颜色更改为红色，而在输入颜色和宽度并点击“改变样式”按钮时将改变div的背景颜色和宽度。您可以根据需要修改JavaScript和CSS代码以满足您的要求。

使用Javascript制作声音按钮

　　能让按钮发出声音的脚本 这下不用制作flash按钮也可以了 我试用的感觉还不错 　　制作方法 　　 新建文件 DynamicAudioButton js 代码

　　//Customize Dynamic Audio Link 自定义动态声音链接function DynamicAudioLink(){open( )}//Customize Dynamic Audio Mouse Over Color 自定义动态声音mouseover颜色function AudioOver() {document Audio button style background= # document Aulor= white }//Customize Dynamic Audio Mouse Down Color 自定义动态声音mousedown颜色function AudioDown() {document Aulor= #cccccc }//Customize Dynamic Audio Mouse Off Color 自定义动态声音mouseOff 颜色function AudioOut() {document Audio button style background= # document Aulor= #ffffff }//Customize Dynamic Audio sound 自定义动态声音function playHome() {document all sound src = bleep wav ;}document write( 《bgsound id= sound 》 )//Customize Button Style 自定义按钮样式document write( 《style type= text/css 》 + 《! )document write( select{background:# ;border color: # ;color: #ffffff ;font family:Arial Helvetica Verdana;font size: pt;font weight: bold;} + 》 + 《/STYLE》 )document write( 《center》《form name=Audio》《input class= select name=button type= button value= Dynamic Audio onclick= DynamicAudioLink() onMouseOver= AudioOver();playHome() onMouseDown= AudioDown() onMouseOut= AudioOut() 》《/form》《/center》 )

　　 保存文件后 在页面相关处插入代码引用该JS文件

　　《Script language= JavaScript SRC= DynamicAudioButton js 》《/script》

图文详解JS中如何创建节点和添加节点

在前端开发中经常需要使用JavaScript，那你知道如何用JS添加子节点吗？这篇文章就和大家讲讲JS创建节点和添加节点的方法，感兴趣的朋友可以参考一下，希望可以帮助到你。
要向HTML DOM 添加一个新的元素，我们首先要创建该节点（即该元素），创建完成以后再将其添加到需要添加的位置。
添加节点的关键是使用appendChild() 方法，它可以在子节点的最后添加新的子节点。
举例：列表中显拍贺誉示了古代四大美女中的三位，点击添加按钮将王昭君作为最后一个节点添加到列表中。
步骤详解
第一步，拍好用createElement创建一个新的 《li》 元素
var node=document.createElement("li")
第二步，因为《li》 元素里面有内容，所以还要用createTextNode创建一个文本节点
var textnode=document.createTextNode("王昭君")
第三步，用appendChild将文本节点添加到《li》 元素中
node.appendChild(textnode)
第四步，将创建好的节点添加到指定位置
var element=document.getElementById("myList")找到一个已有的元素
element.appendChild(node)向已有袭段的元素追加新元素
完整代码如下
HTML部分：
《body》
《ul id="myList"》
《li》杨玉环《/li》
《li》西施《/li》
《li》貂蝉《/li》
《/ul》
《p》单击按钮将项目添加到列表中《/p》
《button onclick="myFunction()"》点击添加《/button》
《/body》 JavaScript部分：
《script type="text/javascript"》
function myFunction(){
var node=document.createElement("li");
var textnode=document.createTextNode("王昭君");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
《/script》效果图：
第一个图是未添加节点的效果，第二个图是点击添加节点后的效果，将王昭君添加到HTML中了。