JavaScript Tutorial/DOM Node/innerHTML

Материал из Web эксперт
Перейти к: навигация, поиск

Change hyperlink innerHTML

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
function ChangeLink() {
    var newlink = document.getElementById("urltext");
    var curlink = document.getElementById("oldurl");
    curlink.href = ("http://" + newlink.value);
    curlink.innerHTML = newlink.value;
}
function NewWindow(prefval) {
    var curlink = document.getElementById("oldurl");
    if (prefval == 1)
    {
        curlink.setAttribute("target", "_blank");
    }
    else if (prefval == 2)
    {
        curlink.removeAttribute("target");
    }
}
//-->
</script>
</head>
<body>
<form>
<a id="oldurl" href="http://www.wbex.ru">www.wbex.ru</a>
<P><input type="radio" value="V1" name="R1" onClick="NewWindow(1)">Open in New Window</p>
<P><input type="radio" name="R1" checked value="V2" onClick="NewWindow(2)">Open in Same Window</p>
   <input type="text" id="urltext" size="20">&nbsp;
   <input type="button" value="Change Link" name="B3" onClick="ChangeLink()"></p>
</form>
</body>
</html>


Change InnerHTML

<html>
    <head>
        <title>InnerHTML Example</title>
        <style type="text/css">
            .red {
                background-color: red;
            }
        </style>
        <script type="text/javascript">
            function useInnerHTML() {
                var oDiv = document.getElementById("div1");
                oDiv.innerHTML = "<b>Hello</b> world";
            }
        </script>
 
    </head>
    <body>
        <div id="div1" class="red">This is my original text</div>
        <input type="button" value="Use InnerHTML" onclick="useInnerHTML()" />
    </body>
</html>


Get element by id and change the innerHTML

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
function ChangeText()
{
    var curtextval = document.getElementById("ptext");
    curtextval.innerHTML = "New Paragraph 1"
}
//-->
</script>
</head>
<body>
<form>
<p id="ptext">This is the first paragraph</p>
<P>This is the second paragraph</p>
  <input type="button" value="Click to Change Text" onClick="ChangeText()"></p>
</form>
</body>
</html>


innerHTML of body element

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function useRanges() {
                alert(document.body.innerHTML);
                
            }
        </script>
    </head>
    <body><p id="p1"><b>Hello</b> World</p>
        <input type="button" value="Use Ranges" onclick="useRanges()" />      
     
  
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/DOM_Node/innerHTML&oldid=9279»