Hướng dẫn jquery get html element by id - jquery lấy phần tử html theo id

Bộ chọn ID

Mô tả: Chọn một phần tử duy nhất với thuộc tính ID đã cho.Selects a single element with the given id attribute.

• Phiên bản được thêm vào: 1.0JQuery ("#ID")jQuery( "#id" )

  ID: ID để tìm kiếm, được chỉ định thông qua thuộc tính ID của một phần tử.An ID to search for, specified via the id attribute of an element.

Đối với các bộ chọn ID, JQuery sử dụng chức năng JavaScript

ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();

ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();

Gọi

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

Mỗi giá trị

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

Nếu ID chứa các ký tự như các khoảng thời gian hoặc dấu chấm, bạn phải thoát khỏi các ký tự đó bằng dấu gạch chéo ngược.

  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
<div id="notMe"><p>id="notMe"p>div>
<div id="myDiv">id="myDiv"div>
$( "#myDiv" ).css( "border", "3px solid red" );

  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
<div id="myID.entry[0]">id="myID.entry[0]"div>
<div id="myID.entry[1]">id="myID.entry[1]"div>
<div id="myID.entry[2]">id="myID.entry[2]"div>
$( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" );

.html () trả về: chuỗiReturns: String

Mô tả: Nhận nội dung HTML của phần tử đầu tiên trong tập hợp các phần tử phù hợp.Get the HTML contents of the first element in the set of matched elements.

• Phiên bản được thêm vào: 1.0.html ().html()

  • Phương pháp này không chấp nhận bất kỳ đối số.

Phương pháp này không có sẵn trên các tài liệu XML.

Trong một tài liệu HTML,

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

$( "div.demo-container" ).html();

Để được truy xuất nội dung của ____ 24 sau đây, nó sẽ phải là công cụ đầu tiên có

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

<div class="demo-container">
  <div class="demo-box">Demonstration Boxdiv>

Kết quả sẽ trông như thế này:

Phương pháp này sử dụng thuộc tính

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

Ghi chú bổ sung:

• Theo thiết kế, bất kỳ hàm tạo hoặc phương thức nào chấp nhận chuỗi HTML - jQuery (), .Append (), .After (), v.v. - có khả năng thực thi mã. Điều này có thể xảy ra bằng cách tiêm thẻ tập lệnh hoặc sử dụng các thuộc tính HTML thực thi mã (ví dụ:

  btn.on('click',function(){
      var ladder_nav_tabs = $('#tabs_nav'),
          first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
          first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
      console.log(first_ladder_element_inset_html);
  });
  

  7). Không sử dụng các phương pháp này để chèn các chuỗi thu được từ các nguồn không tin cậy như tham số truy vấn URL, cookie hoặc đầu vào hình thức. Làm như vậy có thể giới thiệu các lỗ hổng về chữ ký chéo (XSS). Xóa hoặc thoát bất kỳ đầu vào người dùng trước khi thêm nội dung vào tài liệu.

    text-decoration: underline;
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
  <b>Clickb> to change the <span id="tag">htmlspan>
  to a <span id="text">textspan> node.
  This <button name="nada">buttonbutton> does nothing.
$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );

.html (htmlString) trả về: jQueryReturns: jQuery

Mô tả: Đặt nội dung HTML của mỗi phần tử trong tập hợp các phần tử phù hợp.Set the HTML contents of each element in the set of matched elements.

• Phiên bản được thêm vào: 1.0.html (HTMLString).html( htmlString )

  • HTMLSTRING

    Một chuỗi HTML để đặt làm nội dung của mỗi phần tử phù hợp.

• Phiên bản được thêm vào: 1.4.html (chức năng).html( function )

  • function

    Một hàm trả về nội dung HTML để đặt. Nhận vị trí chỉ mục của phần tử trong tập hợp và giá trị HTML cũ làm đối số. JQuery làm trống phần tử trước khi gọi hàm; Sử dụng đối số OldHTML để tham khảo nội dung trước đó. Trong hàm,

    btn.on('click',function(){
        var ladder_nav_tabs = $('#tabs_nav'),
            first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
            first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
        console.log(first_ladder_element_inset_html);
    });
    

    8 đề cập đến phần tử hiện tại trong tập hợp.

Phương pháp

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

Khi

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

Hãy xem xét HTML sau:

<div class="demo-container">
  <div class="demo-box">Demonstration Boxdiv>

Kết quả sẽ trông như thế này:

Phương pháp này sử dụng thuộc tính

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

Theo thiết kế, bất kỳ hàm tạo hoặc phương thức nào chấp nhận chuỗi HTML - jQuery (), .Append (), .After (), v.v. - có khả năng thực thi mã. Điều này có thể xảy ra bằng cách tiêm thẻ tập lệnh hoặc sử dụng các thuộc tính HTML thực thi mã (ví dụ:

btn.on('click',function(){
    var ladder_nav_tabs = $('#tabs_nav'),
        first_ladder_element_inset_id = ladder_nav_tabs.find('li').first().attr('id'),
        first_ladder_element_inset_html = ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();
    console.log(first_ladder_element_inset_html);
});

    text-decoration: underline;
  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
  <b>Clickb> to change the <span id="tag">htmlspan>
  to a <span id="text">textspan> node.
  This <button name="nada">buttonbutton> does nothing.
$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );

.html (htmlString) trả về: jQuery

Mô tả: Đặt nội dung HTML của mỗi phần tử trong tập hợp các phần tử phù hợp.

Phiên bản được thêm vào: 1.0.html (HTMLString) In Internet Explorer up to and including version 9, setting the text content of an HTML element may corrupt the text nodes of its children that are being removed from the document as a result of the operation. If you are keeping references to these DOM elements and need them to be unchanged, use

  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
<div id="notMe"><p>id="notMe"p>div>
<div id="myDiv">id="myDiv"div>
$( "#myDiv" ).css( "border", "3px solid red" );

  <script src="https://code.jquery.com/jquery-3.5.0.js">script>
<div id="notMe"><p>id="notMe"p>div>
<div id="myDiv">id="myDiv"div>
$( "#myDiv" ).css( "border", "3px solid red" );

ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();

ladder_nav_tabs.find("#" + first_ladder_element_inset_id).html();