jquery - JQuery 経由で HTML DOM に到達する方法

Question

JQueryが初めてで、これに到達する方法がわかりません：

これからJQuery経由でDOMを変更する必要があります：

<li id="1_1_4" class="ui-widget-content ui-selectee">1.1.4</li>

これに：

<li id="1_1_4" class="ui-widget-content ui-selectee ui-selected">1.1.4<span class="ui-icon ui-icon-check"
                style="float: right; margin: 2px 7px 0 0;"></span></li>

編集： また、元に戻したい場合は、<Span>それを削除したいという意味です。どうすればできますか？

ありがとう！

Answer 1

追加

$(document).ready(function() {
  $('#1_1_4').append('<span class="ui-icon ui-icon-check" style="float: right; margin: 2px 7px 0 0;"></span>');
});

削除する

$(document).ready(function() {
   $('#1_1_4 .ui-icon-check').remove();
});

また

$(document).ready(function() {
   $('#1_1_4 span').remove();
});

Answer 2

jQuery の .append() 関数を使用できます。

$('.ui-widget-content .ui-selectee .ui-selected').append("<span class='ui-icon ui-icon-check' style='float: right; margin: 2px 7px 0 0;'></span>");

または：

$('#1_1_4').append("<span class='ui-icon ui-icon-check' style='float: right; margin: 2px 7px 0 0;'></span>");

参考文献 http://api.jquery.com/append/

Answer 3

ここを参照してください http://api.jquery.com/category/manipulation/dom-replacement/

Answer 4

これを使って：

    $( "#1_1_4" ).append( "<span class=\"ui-icon ui-icon-check\" style=\"float: right; margin: 2px 7px 0 0;\"></span>" );