章节
问答
课签
笔记
评论
占位
占位

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法:

document.createElement(tagName)

参数:

tagName:字符串值,这个字符串用来指明创建元素的类型。

注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。

我们来创建一个按钮,代码如下:

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "创建一个按钮";  
   body.appendChild(input);  
 </script>  

效果:在HTML文档中,创建一个按钮。

我们也可以使用setAttribute来设置属性,代码如下:

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>  

效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。

任务

试一试,实现在HTML文档中创建一个链接,并设置相应属性。

1. 在右边编辑器补充代码,完善createa(url,text)创建链接函数,参数1为链接地址,参数2为链接文本。函数中添加链接地址、文本、文字颜色属性。

2. 调用createa函数,链接地址 http://www.imooc.com,文本为:慕课网

?不会了怎么办

var body= document.body;
//创建链接
function createa(url,text)
{
    var a = document.createElement("a");
    a.href = url;
    a.innerHTML = text;
    a.style.color = "red";
    body.appendChild(a);
}
// 调用函数创建链接
createa("http://www.imooc.com/","慕课网");

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 秃秃小盆友
为啥这个a.innerHTML不能写成:a.setAttribute("innerHTML",text);

最新回答 / 黑夜的白_羊
现在的慕课编辑器越来越差了,我都是在自己的编辑器上敲的,这个得多次提交

最赞回答 / 慕仔1115802
我的答案如图所示:<...图片...>

最新回答 / 几盎丶
你问的是没有使用doucument方法,但却执行了,是吧?这是因为var a=document.createElement("a");创建了一个结点对象,既然是对象,它的所有属性方法都可以通过'.'方法操作的,我是这样理解的,例如试着console.log(a.href);在你没设置前他可能会提示undefinde,却没有报错,说明我们用对象的方法访问它是没错的,只是这个属性未定义而已仅作参考哦,楼主可以去查一查对象,这一部分的内容

最赞回答 / 走馬勿观花
文本内容是innerHTML,value想要显示,只能在input用这里又区分input和其他元素。input获取是 .value;其他元素获取是 .innerHTML前面有讲,可以回顾看看

已采纳回答 / 阳火锅
问题出在了你的<...图片...>这里。。setAttribute这个函数是设置标签属性的,你觉得innerHTML这个是属于标签属性吗?innerHTML这个是用来设置标签内部文本的...它并不属于标签的一种属性..  a标签的属性有哪些,这个你可以百度去查一下,我目前只例举:href,title...所以你这个代码应该这样写<...图片...>

已采纳回答 / 叫我小生哥
你前面声明了 “main”var main = document.body;你使用的时候还是“ body.appendChild(a);”改成 main.appendChild(a);

最新回答 / 巧克力慕丝
电商网站啊,或者购物平台,再或者企业和政府发布信息用的平台都可以。

最新回答 / 秋之枫华
<...图片...>如图,那是因为type是input标签自带的属性,而onclick并不是,所以onclick没法直接拿来用哦!

最新回答 / 慕无忌4399567
没有跳转的话把http://www.imooc.com换成https://www.imooc.com应该就可以了

最赞回答 / 伍月梅子
http://www.imooc.com/改成https://www.imooc.com/就可以了。报错里有提示的。

已采纳回答 / 江南小帅瓜
 a.innterHTML=text;; 老哥,你这个单词写错el

最赞回答 / 莫寻墨迹
<...code...>
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言