jQuery 3.3

.html()




jquery
احصل على محتويات HTML للعنصر الأول في مجموعة العناصر المتطابقة أو قم بتعيين محتويات HTML لكل عنصر متطابق.

.html () إرجاع: String

الوصف: احصل على محتويات HTML للعنصر الأول في مجموعة العناصر المتطابقة.

  • الإصدار المضاف: 1.0 .html()

    • هذه الطريقة لا تقبل أي حجج.

هذه الطريقة غير متوفرة في مستندات XML.

في مستند HTML ، يمكن استخدام .html() للحصول على محتويات أي عنصر. إذا كان تعبير selector يتطابق مع أكثر من عنصر واحد ، فسيتم إرجاع محتوى 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 علامات الاقتباس حول قيم السمات إذا كانت تحتوي على أحرف أبجدية رقمية فقط.

ملاحظات إضافية:

  • حسب التصميم ، يمكن لأي منشئ jQuery أو الطريقة التي تقبل سلسلة HTML - jQuery() ، .append() ، .after() ، إلخ - تنفيذ .append() برمجية. يمكن أن يحدث هذا عن طريق حقن علامات البرنامج النصي أو استخدام سمات HTML التي تقوم بتنفيذ التعليمات البرمجية (على سبيل المثال ، <img onload=""> ). لا تستخدم هذه الطرق لإدراج سلاسل تم الحصول عليها من مصادر غير موثوقة مثل معلمات استعلام URL أو ملفات تعريف الارتباط أو مدخلات النموذج. يمكن القيام بذلك تقديم الثغرات الأمنية عبر المواقع (XSS). أزل أو تخلص من أي إدخال للمستخدم قبل إضافة محتوى إلى المستند.

مثال:

انقر فقرة لتحويلها من html إلى نص.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
  }
  b {
    text-decoration: underline;
  }
  button {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</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>
 
<script>
$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});
</script>
 
</body>
</html>

عرض:

.html (htmlString) إرجاع: jQuery

الوصف: قم بتعيين محتويات HTML لكل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضافة: 1.0 .html (htmlString)

    • htmlString
      النوع: htmlString
      مجموعة من HTML لتعيين كمحتوى لكل عنصر متطابق.
  • الإصدار المضافة: 1.4 . html (وظيفة)

    • وظيفة
      النوع: Function (فهرس Integer ، htmlString oldhtml) => htmlString
      دالة تقوم بإرجاع محتوى HTML لتعيينه. يستقبل موضع فهرس العنصر في المجموعة وقيمة HTML القديمة كوسيطة. jQuery يفرغ العنصر قبل استدعاء الدالة؛ استخدم الوسيطة oldhtml للإشارة إلى المحتوى السابق. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.

أسلوب .html() غير متوفر في مستندات XML.

عند استخدام .html() لتعيين محتوى عنصر ما ، يتم استبدال أي محتوى موجود في هذا العنصر تمامًا بالمحتوى الجديد. بالإضافة إلى ذلك ، يقوم jQuery بإزالة التركيبات الأخرى مثل معالجات الأحداث والبيانات من العناصر الفرعية قبل استبدال تلك العناصر بالمحتوى الجديد.

خذ بعين الاعتبار HTML التالية:

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

يمكن تعيين محتوى <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 emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

بالنظر إلى مستند يحتوي على ست فقرات ، سيحدد هذا المثال HTML لـ <div class="demo-container"> إلى <p>All new content for <em>6 paragraphs!</em></p> .

تستخدم هذه الطريقة خاصية innerHTML للمتصفح. قد لا تقوم بعض المتصفحات بإنشاء DOM الذي يكرر بالضبط مصدر HTML المقدم. على سبيل المثال ، سيقوم Internet Explorer قبل الإصدار 8 بتحويل كافة خصائص href على الارتباطات إلى عناوين URL المطلقة ، ولن يقوم Internet Explorer قبل الإصدار 9 بمعالجة عناصر HTML5 بدون إضافة طبقة توافق منفصلة.

لتعيين محتوى عنصر <script> ، الذي لا يحتوي على HTML ، استخدم طريقة .text() وليس .html() .

ملاحظة: في Internet Explorer بما يصل إلى الإصدار 9 بما في ذلك ، قد يؤدي إعداد محتوى نص عنصر HTML إلى تلف العقد النصية لأطفاله التي تتم إزالتها من المستند كنتيجة للعملية. إذا كنت تحتفظ بمراجع لعناصر DOM هذه وتحتاج إلى أن تكون بدون تغيير ، استخدم .empty().html( string ) بدلاً من .html(string) بحيث تتم إزالة العناصر من المستند قبل تعيين السلسلة الجديدة إلى جزء.

أمثلة:

أضف بعض html لكل div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  .red {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<span>Hello</span>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
</script>
 
</body>
</html>

عرض:

إضافة بعض HTML إلى كل div ثم قم فوراً بمعالجة إضافية إلى html المدرجة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  div {
    color: blue;
    font-size: 18px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<b>Wow!</b> Such excitement..." );
$( "div b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>
 
</body>
</html>

عرض: