Make text bold by replaces it in the tree with an Element node

Make text bold by replaces it in the tree with an Element node : HTML Style : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » HTML Style »

Make text bold by replaces it in the tree with an Element node




/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
*/
<html>

<script>
// This function takes a node n, replaces it in the tree with an Element node
// that represents an html <b> tag, and then makes the original node the
// child of the new <b> element.
function embolden(node) {
    var bold = document.createElement("b"); // Create a new <b> Element
    var parent = node.parentNode;           // Get the parent of node
    parent.replaceChild(bold, node);        // Replace node with the <b> tag
    bold.appendChild(node);                 // Make node a child of the <b> tag
}
</SCRIPT>

<!-- A couple of sample paragraphs -->
<p id="p1">This <i>is</i> paragraph #1.</p>
<p id="p2">This <i>is</i> paragraph #2.</p>

<!-- A button that invokes the embolden() function on the first paragraph -->
<button onclick="embolden(document.getElementById('p1'));">Embolden</button>
</html>