Добавить еще один элемент, используя GetElementById?

Question

Допустим, это HTML-код:

<tr>
    <td>Wusool</td>
    <td id="yasel">
        15:12 
    </td>
</tr>

и я хочу изменить его на этот HTML-код:

<tr>
    <td>Wusool</td>
    <td id="yasel">
        15:12 
    </td>
</tr>
<tr>
    <td>Ersal</td>
    <td id="sent">
        20:12
    </td>
</tr>

Как я могу использовать GetElementById для этого?

Заранее спасибо.

Answer 1

var tr = document.getElementById('yasel').parentNode,
    new_tr = tr.parentNode.insertRow( tr.rowIndex + 1 ),
    new_td;

new_tr.insertCell(0).innerHTML = 'Erasel';

(new_td = new_tr.insertCell(1)).innerHTML = '20:12';
new_td.id = "sent";

http://jsfiddle.net/7N3kr/

Answer 2

используя javascript, вы можете сделать это как

var td_elem = document.getElementById('yasel');
var tr_elem = td_elem.parentNode;
var table_elem = tr_elem.parentNode;

table_elem.innerHTML = table_elem.innerHTML + '<tr><td>Ersal</td><td id="sent">20:12</td></tr>';

fiddle: http://jsfiddle.net/4MJuS/

, но вы должны попробовать использовать jquery, это очень хорошая структура для javascriptВы можете сделать это легко, используя jQuery

$('#yasel').parent().parent().append('<tr><td>Ersal</td><td id="sent"> 20:12 </td></tr>');

Answer 3

Попробуйте этот код в HTML Head:

<script language="javascript" type="text/javascript" >
    function ChangeValue(element_id, val) {
        var elm = document.getElementById(element_id);
        elm.innerHTML = val;
    }
</script>

Попробуйте это в теле HTML:

<table>
    <tr>
        <td>
            <span id="box1"></span>
        </td>
        <td>
            <span id="box2"></span>
        </td>
        <td>
            <span id="box3"></span>
        </td>
    </tr>
</table>
<input type="button" id="btn_change1" value="Change Value" onclick="ChangeValue('box1','22:30')" />
<input type="button" id="btn_change2" value="Change Value" onclick="ChangeValue('box2','11:10')" />
<input type="button" id="btn_change3" value="Change Value" onclick="ChangeValue('box3','21:35')" />

Answer 4

После получения elementbyID получите родительский элемент (у меня нет удобного кода, но вы можете узнать, как получить родительский элемент для html getelementbyID).Затем добавьте дочерний элемент.