首页 web前端 js教程 javascript转换字符串为dom对象(字符串动态创建dom)_javascript技巧

javascript转换字符串为dom对象(字符串动态创建dom)_javascript技巧

May 16, 2016 pm 06:27 PM
javascript 字符串

前言:
在javascript里面动态创建标准dom对象一般使用:
var obj = document.createElement('div');
然后再给obj设置一些属性。
但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了
伪代码:var obj=strToDom('
Hello World!
');
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象

start:
其实实现这样的一个转换是很简单的,这里主要是利用了一个属性innerHTML.
innerHTML,我相信大家都使用过,特别是动态往一个元素里面插内容时使用,这里我还是在介绍下innerHTML,方便于还不太熟悉的人。
innerHTML不是w3c标准,是由ie发明创造出来的,但是由于这个属性的方便性,和当时微老大的地位,其它非ie浏览器也内置了innerHTML并给出了支持。
虽然innerHTML不是w3c标准,但是却是一个事实标准,这个事实标准很重要,也就是目前主流浏览器都支持innerHTML,自然就做到了兼容多浏览器。
code:
复制代码 代码如下:

function parseDom(arg) {
   var objE = document.createElement("div");
   objE.innerHTML = arg;
   return objE.childNodes;
};

短短几行代码就实现了转换,我们首先用标准的方法创建一个div出来,在用innerHTML来插入一个元素,其实也就是利用浏览器自己的内核算法来实现的一个转换。在用childNodes返回出来。
这样我们就完成了一个字符串到标准dom的转换,巧妙的利用浏览器本身的算法,可以用简单少量的代码来完成大量复杂的转换,我们不用去解析字符串,而是交给浏览器自己来完成,这样既准确又无误。
使用:
复制代码 代码如下:

var obj=parseDom('
Hello World!
');
var obj=parseDom('
Hello World!
多个也没关系');

注意:
childNodes返回的是一个类似数组的list。所以如果是一个元素,要使用这个dom需要这样使用obj[0]。如果是多个同级的dom转换,可以这样使用obj[0]、obj[1]…
end

到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了
使用:b$.parseDom('
Hello World!
')

bBank 开源Javascript框架
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1249
24
PHP中int类型转字符串的方法详解 PHP中int类型转字符串的方法详解 Mar 26, 2024 am 11:45 AM

PHP中int类型转字符串的方法详解在PHP开发中,经常会遇到将int类型转换为字符串类型的需求。这种转换可以通过多种方式实现,本文将详细介绍几种常用的方法,并附带具体的代码示例来帮助读者更好地理解。一、使用PHP内置函数strval()PHP提供了一个内置函数strval(),可以将不同类型的变量转换为字符串类型。当我们需要将int类型转换为字符串类型时,

python怎么重复字符串_python重复字符串教程 python怎么重复字符串_python重复字符串教程 Apr 02, 2024 pm 03:58 PM

1、首先打开pycharm,进入到pycharm主页。2、然后新建python脚本,右键--点击new--点击pythonfile。3、输入一段字符串,代码:s="-"。4、接着需要把字符串里面的符号重复20次,代码:s1=s*20。5、输入打印输出代码,代码:print(s1)。6、最后运行脚本,在最底部会看到我们的返回值:-就重复了20次。

如何在Go语言中截取字符串 如何在Go语言中截取字符串 Mar 13, 2024 am 08:33 AM

Go语言是一种强大且灵活的编程语言,它提供了丰富的字符串处理功能,包括字符串截取。在Go语言中,我们可以使用切片(slice)来截取字符串。接下来,将详细介绍如何在Go语言中截取字符串,并附上具体的代码示例。一、使用切片截取字符串在Go语言中,可以使用切片表达式来截取字符串的一部分。切片表达式的语法如下:slice:=str[start:end]其中,s

Golang字符串是否以指定字符结尾的判断方法 Golang字符串是否以指定字符结尾的判断方法 Mar 12, 2024 pm 04:48 PM

标题:Golang中判断字符串是否以指定字符结尾的方法在Go语言中,有时候我们需要判断一个字符串是否以特定的字符结尾,这在处理字符串时十分常见。本文将介绍如何使用Go语言来实现这一功能,同时提供代码示例供大家参考。首先,让我们来看一下Golang中如何判断一个字符串是否以指定字符结尾的方法。Golang中的字符串可以通过索引来获取其中的字符,而字符串的长度可

Golang中如何检查字符串是否以特定字符开头? Golang中如何检查字符串是否以特定字符开头? Mar 12, 2024 pm 09:42 PM

Golang中如何检查字符串是否以特定字符开头?在使用Golang编程时,经常会遇到需要检查一个字符串是否以特定字符开头的情况。针对这一需求,我们可以使用Golang中的strings包提供的函数来实现。接下来将详细介绍如何使用Golang检查字符串是否以特定字符开头,并附上具体的代码示例。在Golang中,我们可以使用strings包中的HasPrefix

解决PHP中16进制转字符串出现中文乱码的方法 解决PHP中16进制转字符串出现中文乱码的方法 Mar 04, 2024 am 09:36 AM

解决PHP中16进制转字符串出现中文乱码的方法在PHP编程中,有时候我们会遇到需要将16进制表示的字符串转换为正常的中文字符的情况。然而,在进行这个转换的过程中,有时会遇到中文乱码的问题。这篇文章将为您提供解决PHP中16进制转字符串出现中文乱码的方法,并给出具体的代码示例。使用hex2bin()函数进行16进制转换PHP内置的hex2bin()函数可以将1

PHP字符串匹配技巧:避免模糊包含表达式 PHP字符串匹配技巧:避免模糊包含表达式 Feb 29, 2024 am 08:06 AM

PHP字符串匹配技巧:避免模糊包含表达式在PHP开发中,字符串匹配是一个常见的任务,通常用于查找特定的文本内容或验证输入的格式。然而,有时候我们需要避免使用模糊的包含表达式来确保匹配的准确性。本文将介绍一些在PHP中进行字符串匹配时避免模糊包含表达式的技巧,并提供具体的代码示例。使用preg_match()函数进行精确匹配在PHP中,可以使用preg_mat

Golang 字符串修改详解:动态调整和可变性 Golang 字符串修改详解:动态调整和可变性 Apr 08, 2024 pm 03:27 PM

GoLang中的字符串虽然不可变,但可通过以下技术动态修改:使用字符串连接符连接字符串。使用字符串格式化创建新字符串。修改字符串底层字节切片。使用第三方库提供的可变字符串类型。

See all articles