添加引用现有命名空间的 XHTML 元素

Add XHTML element referencing existing namespace

本文关键字：XHTML 元素 命名空间 引用 添加      更新时间：2023-09-26

问题

给定一个定义了自定义命名空间的 XHTML 文档，

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello">…</html>

如何使用jQuery（或vanilla JavaScript）添加一个元素，该元素具有引用该命名空间的属性，指定为字符串：

var newElement = '<p foo:bar="please">add me</p>';

你试过什么？

var xhtml = '<p foo:bar="no">two</p>';
try     { $('div').append(xhtml); }
catch(e){ alert(e);               }
// [FFv14]     "An invalid or illegal string was specified"  code: "12"
// [Chromev21] Error: SYNTAX_ERR: DOM Exception 12
// [IE9]       DOM EXception: SYNTAX_ERR (12)
try     { $('div')[0].innerHTML += xhtml; }
catch(e){ alert(e);                       }
// [FFv14]     Works!
// [IE9]       Works!
// [Chromev21] Error: SYNTAX_ERR: DOM Exception 12

测试页（托管）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello"><head>
  <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'/>
  <title>Using JS to add element referencing custom namespace</title>
</head><body>
  <div><p foo:bar="yes">one</p></div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript"><![CDATA[
    var xhtml = '<p foo:bar="no">two</p>';
    try     { $('div').append(xhtml); }
    catch(e){ alert(e);               }
    try     { $('div')[0].innerHTML += xhtml; }
    catch(e){ alert(e);                       }
  ]]></script>
</body></html>

我能想到的最好的是

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello"><head>
  <title>Using JS to add element referencing custom namespace</title>
</head><body >
  <div><p foo:bar="yes">one</p></div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript"><![CDATA[
    var xhtml = '<p foo:bar="no">two</p>';
    try { 
      var wrap = '<div xmlns:foo="' + $('div')[0].lookupNamespaceURI('foo') + '">'+ xhtml + '</div>';
      var el = document.createElement('div');
      el.innerHTML = wrap;
      $('div')[0].appendChild(el.firstChild.firstChild);
    }
    catch(e){ alert(e); }
  ]]></script>
</body></html>

需要一些打包，但似乎可以在IE9，Chrome 21，FF 14和Opera 12中使用。

相关文章：