npm library xmldom doesn’t have something like innerHTML. It has only specific features, not full features of W3C DOM. Here, I introduce how to change inner html text with xmldom.
Environment
NodeJS 10.9.0
npm 6.6.0
xmldom 0.1.27
Kotlin 1.3.11
How to do
Now, suppose change the internal html of one tag, which is gotten by getElementById or something else. I’ll show the example code first, in Kotlin. Compile it to JavaScript, then it works.
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
importorg.w3c.dom.*
importorg.w3c.dom.parsing.DOMParser
fun main(){
val html="""
<!DOCTYPE html>
<html>
<head></head>
<body>
<header data-sample="sample">
</header>
</body>
</html>
""".trimIndent()
val doc=DOMParser().parseFromString(
html,"text/html"
)
val tag=doc.getElementsByTagName("header")[0]!!
val innerHtml="<p>Hello World!</p>"
val parentNode=tag.parentNode!!
val attributes=tag.attributes
val tagName=tag.tagName.toLowerCase()
varopenText="<$tagName"
for(iin0until attributes.length)
openText+=
" ${attributes[i]!!.name}="+
""${attributes[i]!!.value}""
openText+=">"
val closeText="</$tagName>"
val newElementText=openText+innerHtml+closeText
parentNode.replaceChild(
DOMParser().parseFromString(
newElementText,"text/html"
),
tag
)
println(
doc.toString().replace(
" xmlns="http://www.w3.org/1999/xhtml"", ""
)
)
}
It uses replaceChild to change internal HTML. At the last, I remove xmlns="http://www.w3.org/1999/xhtml" from entire html string, because the HTML output from toString method contains the attribute and value.
In my environment, the code is compiled to app.js, and NodeJS code is as follows.
JavaScript
1
2
3
4
global.DOMParser=require('xmldom').DOMParser
global.kotlin=
require("path/out/production/app/lib/kotlin.js")
require("path/out/production/app/app.js")
Executing the script, the following message is output.
To make it more useful, extract changing inner html part to the function. Below I created the function, changeInnerHtml, for replacing the innerHTML value.
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
importorg.w3c.dom.*
importorg.w3c.dom.parsing.DOMParser
fun changeInnerHtml(tag:Element,innerHtml:String){
