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






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>

           
       








Related examples in the same category

1.Paragraph Style
2.Using document create Style Sheet
3.Reading the canHaveChildren Property
4.Change the Text style Properties
5.Change html style
6.Using getBoundingClientRect()
7. Dynamically Updating Styles Using DHTML
8.Get Element style
9.'EM' and 'P' element