javascript ( document.write)?

Question

I have a question with document.write and it's uses. I use the js lint to write my javascript programs in. I've been reading that it is bad coding practice to use it and that it should be avoided.
but I use it quite a bit and I'm not sure what else to use ( I learnt from w3schools.com )
what would be the alternative syntax for

1. var txt="Hello World!";
document.write(txt.length);

2. var str="Hello world!";
document.write(str.match("world") + "
");
document.write(str.match("World") + "
");
document.write(str.match("world!"));

3. document.write("

My First JavaScript

");

4.


I know this is long but I would appreciate any help..thanks

Answer 1

You could use DOM elements, here : http://www.w3schools.com/jsref/dom_obj_all.asp



For example, another method for "document.write("Hello World");" would be:



//fist we create a "p" element

var p = document.createElement("p");

//now we create a text node

var text = document.createTextNode("Hello World");

//now we attach the text node to the p element

p.appendChild(text);

//now we can append this p element to what ever element we have in our body, for example we have a div element with an id="div1"



document.getElementById("div1").appendChild(p);



whats so cool about this? We can change the css with js, for example:



p.style.color = "green";

p.style.fontFamily = "tahoma";

p.style.marginLeft = "50px";



and so on...







EDIT:



Looks like some of my code and the other guy's gets hidden and repalced with "...", so the hidden code is the same technique as the previous step: .appendChild();

Answer 2

The point of document.write() is to write in the document. Using document.write() in a web page will replace its entire contents. The point of JavaScript is to manipulate the DOM (i.e. change the HTML of the page).



If you are writing simple programs and you only want to see the output of the program, then you can use document.write() fine. However, if you want to use JavaScript for real web development, then you need to insert the values into the DOM.



There are different ways to manipulate it. You can either use a web page that already has elements within it and then insert the content into them, or you can create a new element and then insert it into the DOM. Since the latter only requires pure JavaScript, I will use that approach. I will insert comments (using //) to explain what I am doing.



1.



var txt = "Hello world!";

// This creates a new div element.

var element = document.createElement("div");

// This sets the text content of the div element as the value of the txt variable.

element.textContent = txt;

// This inserts the div element into the body element of the document.

document.body.appendChild(element);



2.



This is essentially the same as above, just requires multiple elements (or you can write all the values into the same element).



3.



// Create a p element.

var element = document.createElement("p");

//Change the text content of the element.

element.textContent = "My First JavaScript";

// Inject it into the DOM.

document.body.appendChild(element);



4.



This is essentially the same as number 1, you just need to create an element and insert that instead of using document.write().

Answer 3

in your html code create something like this

Note: myText is just an id you can name it in what ever you prepare...



then in your javascript code replace the document.write with document.getElementById("myText").innerHTML



example...



document.getElementById("myText").innerHTML = (str.match("world"))



===========



if your using jquery you can use $("#myText").html(str);



by the way it my comment is been truncated the last expression that I wrote is innerHTML