في الآونة الأخيرة ، تم العثور على أن جميع المكتبات الرئيسية يمكن أن تستخدم xxx.innerhtml = شظايا HTML لإنشاء عناصر العقدة ، ثم أدخلها في مواقع مختلفة للعنصر المستهدف. هذا الشيء هو في الواقع إدراج جاكينتميل ، لكن IE INNERHTML يحول هذه الميزة إلى عيب.
لا يمكن تعيين innerhtml من tbody في IE6/IE7/IE8/IE9 ، الرمز المستنسخ هو كما يلي
نسخة الكود كما يلي:<! doctype html>
<html>
<head>
<meta charset = utf-8/>
<title> IE6-II9 Innerhtml لا يمكن نسخ الأخطاء </title>
</head>
<نمط الجسم = الارتفاع: 3000px>
<griding>
<tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</table>
<p>
<button id = btn1> احصل على </button> <button id = btn2> set </utton>
</p>
<script>
var tbody = document.getElementsByTagName ('tbody') [0]
وظيفة SettBody () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>' '
}
وظيفة getTbody () {
تنبيه (tbody.innerhtml)
}
btn1.onclick = function () {
gettbody ()
}
btn2.onclick = function () {
SettBody ()
}
</script>
</body>
</html>
زران ، الأول يحصل على innerhtml من tbody ، والثاني يضع innerhtml من tbody.
عند الحصول عليها ، تظهر جميع المتصفحات سلسلة من TR ، ولكن عند تعيينها ، لا يدعم ذلك IE6-9 ، ويتم الإبلاغ عن خطأ ، كما هو موضح في الشكل
يمكنك استخدام الخصائص لتحديد ما إذا كان المتصفح يدعم إعداد tbody innerhtml
نسخة الكود كما يلي:var isupporttbodyinnerhtml = function () {
var table = document.createElement ('table')
var tbody = document.createElement ('tbody')
table.appendchild (tbody)
var boo = true
يحاول{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
}
العودة بوو
} ()
تنبيه (isupporttbodyinnerhtml)
بالنسبة لـ IE6-II9 ، إذا كنت ترغب في تعيين innerhtml من tbody ، يمكنك استخدام الطريقة البديلة التالية
نسخة الكود كما يلي:دالة setBodyInnerhtml (tbody ، html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>' '
بينما (tbody.firstchild) {
tbody.removechild (tbody.firstchild)
}
tbody.appendchild (div.firstchild.firstchild)
}
استخدم Div لاحتواء جدول ، ثم حذف جميع العناصر في tbody ، وأخيراً أضف العنصر الأول من العنصر الأول من div إلى tbody ، أي table> tr.
بالطبع هناك إصدار أكثر تبسيطًا ، والذي يستخدم بشكل مباشر طريقة ReplaceChild لاستبدالها
نسخة الكود كما يلي:دالة setBodyInnerhtml (tbody ، html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>' '
tbody.parentnode.replacechild (div.firstchild.firstchild ، tbody)
}
من سجل MSDN ، فإن Innerhtml of Col و Colgroup و FrameSet و HTML و Head و Style و Table و Tfoot و Thead و Tran و TR كلها قراءة فقط (IE6-II9).
خاصية InnerHTML هي قراءة فقط على Col ، Colgroup ، FrameSet ، HTML ، Head ، Style ، Table ، tbody ، tfoot ، thead ، title ، و tr كائنات.
يمكنك تغيير قيمة عنصر العنوان باستخدام خاصية document.title.
لتغيير محتويات الجدول ، تستخدم عناصر TFOOT ، THEAD ، و TR ، نموذج كائن الجدول الموضح في جداول بناء ديناميكي. ومع ذلك ، لتغيير محتوى خلية معينة ، يمكنك استخدام innerhtml.