html()

תוכן:

html()
- .html()
html( htmlString )
- .html( htmlString )
- .html( function(index, oldhtml) )

.html()

תיאור: מקבל תוכן HTML של אלמנט ראשון ברשימה של אלמנטים בהתאמה.

.html()

הוספה בגרסה: 1.0

שיטה הזו לא זמינה עבור מסמכי XML.

במסמכי HTML, אנחנו יכולים להשתמש ב- .html() עבור קבלת תוכן של כל אלמנט. אם ביטוי של סלקטור תואם ליותר מאלמנט אחד, רק תוכן של הראשון יוחזר. נבחן קוד הבא:

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

כדי לקבל תוכן של <div>, הוא צריך להיות ראשון עם class="demo-container" במסמך:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

התוצאה היא:

<div class="demo-box">Demonstration Box</div>

שיטה הזה משמשת מאפיין של דפדפן innerHTML. מספר דפדפנים יכולים לא להחזיר HTML, שתואם ל- HTML מקורי במסמך. לדוגמה, Internet Explorer לפעמים משאיר גרשיים מסביב לערכי תכונות, אם הם מכילים רק תווים אלפאנומריים בלבד.

דוגמאות

תלחצו על הפסקה כדי להפוך אותה מ- html לטקסט

    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });
  });
  </script>
  <style>
  p { margin:8px; font-size:20px; color:blue; 
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
</head>
<body>
  <p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>
</body>
</html>

נסה זאת בעצמך

.html( htmlString )

מחזירה: jQuery

תיאור: מגדיר תוכן HTML של כל אלמנט ברשימה של אלמנטים בהתאמה.

.html( htmlString )

הוספה בגרסה: 1.0

htmlString

מחרוזת

מחרוזת של HTML כדי להגדיר תוכן של כל אלמנט.

.html( function(index, oldhtml) )

הוספה בגרסה: 1.4

function(index, oldhtml)

פונקציה

פונקציה שמחזירה תוכן של HTML כדי להגדיר. מקבלת אינדקס של מיקום האלמנט ברשימה וערך ישן של HTML בתור ארגומנטים. jQuery מרוקנת אלמנט לפני הפעלה של הפונקציה; משמש ארגומנט oldhtml כדי להתייחס לתוכן הקודם.

שיטה הזו לא זמינה עבור מסמכי XML.

כאשר אנחנו משתמשים ב- .html() כדי להגדיר תוכן של האלמנטים, תוכן כלשהו של אלמנטים האלה יוחלף במלוא על תוכן חדש. נבחן HTML הבא:

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

אנחנו יכולים להגדיר תוכן HTML של <div class="demo-container"> כמו כן:

$('div.demo-container')
  .html('<p>All new content. <em>You bet!</em></p>');

שורת קוד הזו מחליפה הכל בתוך <div class="demo-container">:

<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

החל מ- jQuery 1.4, שיטה .html() מאפשרת לנו להגדיר תוכן HTML באמצעות שליחה אותו לתוך הפונקציה.

$('div.demo-container').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

בהינתן מסמך עם שיש פסקאות, דוגמה הזו תגדיר HTML של <div class="demo-container"> ב- <p>All new content for <em>6 paragraphs!</em></p>.

דוגמאות

דוגמה 1

מוסיף קוד HTML לכל div

$("div").html("Hello Again");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("div").html("<span class='red'>Hello <b>Again</b></span>");
  });
  </script>
  <style>
  .red { color:red; }
  </style>
</head>
<body>
  <span>Hello</span>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מוסיף קוד html לכל div אחרי זה מעבד קוד שהוכנס

    $("div").html("Wow! Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");
  });
  </script>
  <style>
  div { color:blue; font-size:18px; }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

html()

.html()

.html()

דוגמאות

.html( htmlString )

.html( htmlString )

.html( function(index, oldhtml) )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

תגובות