Javascript appendChild(script) works only one time

StackOverflow https://stackoverflow.com/questions/20098239

题

I'm trying to create two separate HTML documents: main.html and sufler.html. Idea is to control sufler.html page from main.html . So far I succeeded to write text and change it's font style. But font style changes only ONE time...

I need it to be able to change many times, can't understand what is going on, because, as I understanding, every time I calling function writing(), I'm clearing all new document's content with newDoc.body.innerHTML = ''... but it seems that not... although text is changing every time.

main.html

<html>
<head>
<script type="text/javascript">
var HTMLstringPage1     = '<!DOCTYPE html><html><head><link href="stilius.css" rel="stylesheet" type="text/css" /></head><body>',
    HTMLstringPage2     = '</body></html>',
    HTMLstringDiv1      = '<div id="sufler"><div id="mov"><p id="flip">',
    HTMLstringDiv2      = '</p></div></div>';

//NEW WINDOW OPEN--------------------------------------------------------------------------------------------------------
var newWindow   = window.open('suffler.html','_blank','toolbar=no, scrollbars=no, resizable=no, height=615,width=815'); 
var newDoc      = newWindow.document;
                  newDoc.write(HTMLstringPage1,HTMLstringDiv1+'Text'+HTMLstringDiv2,HTMLstringPage2);
var script      = newDoc.createElement("script");
                  script.type = "text/javascript";
//=======================================================================================================================

//WRITING----------------------------------------------------------------------------------------------------------------
function writing(){
    newText =   document.getElementById("sel-1").value.replace(/\n/gi, "</br>");
    fontas=     document.getElementById("textFont").value;
    size=       document.getElementById("textSyze").value;
    stylas=     document.getElementById("textStyle").value;
    syntax=     document.getElementById("textSyntax").value;

    newDoc.body.innerHTML = '';//clears old text (should clear old scripts and functions too)
    newDoc.write(HTMLstringPage1,HTMLstringDiv1,newText,HTMLstringDiv2,HTMLstringPage2);//writes new text (and new scripts and functions)
    
var text        = newDoc.createTextNode('document.getElementById("flip").style.font="'+stylas+' '+syntax+' '+size+'px '+fontas+'";');
    script.appendChild(text);
    newDoc.getElementsByTagName("body")[0].appendChild(script);
}
//=======================================================================================================================
</script>
</head>
<body>
    <button type="button" style="background-color: #F5FF25;" onclick="writing()">Apply     text</button>
</body>
</html>
有帮助吗？

解决方案

Any one node can only be added to the document once. You only define script once but trying to add it to the DOM multiple times. Put the var script = ... line inside writing().

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top