innerText和innerHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!--通过选中checkbox获取对应label标签的内容-->

<table class="doc-table">

        <tr>

            <td><strong>爱好:</strong></td>

            <td>

                <input type="checkbox"
name="ckb-love"
id="ckbSing"
/>

                <label id="lblSing"
for="ckbSing"><音乐></label>

            </td>

        </tr>

        <tr>

            <td colspan="2">

                <input type="button"
id="btnSubmit"
value="提交"
/>

            </td>

        </tr>

</table>

1

2

3

4

5

6

7

8

9

10

11

window.onload = function
() {

           var
btnSubmit = document.getElementById("btnSubmit");

           btnSubmit.onclick = function
() {

               var
ckbEmelents = document.getElementsByName("ckb-love");//获取一组name为ckb-love的多选框

               for
(var
i = 0; i < ckbEmelents.length; i++) {

                   var
id = ckbEmelents[i].id;  //拿到当前元素的id

                   var
lblEmelent = document.getElementById(id.replace("ckb", "lbl"));//将id进行替换，获取label的内容

                   alert(lblEmelent.innerText); //在ie、chrome、opera都能显示<音乐> 在firefox中则显示 undefined

      }

   }

}

1

2

3

<div id="test">

       <span style="color: red">Hello</span>  World!

</div>

1

2

3

4

5

//innerText

window.onload = function
() {

   var
text = document.getElementById("test").innerText;

   alert(text); //ie、chrome、opera 显示 Hello World! firefox依然显示 undefined

}

1

2

3

4

5

6

//innerHTML

window.onload = function
() {

 var
html = document.getElementById("test").innerHTML;

           alert(html); //ie、chrome、opera、firefox

                        //显示 <span style="color: red">Hello</span>  World!

}