插入& # 39;乳胶# 39;-在html中动态文本

Insert 'LATEX' - text dynamically in html

本文关键字：动态 文本 html 乳胶 插入      更新时间：2023-09-26

我想通过MathJax动态地在html文件中插入'LATEX'文本。

<html>
<head>
    <title>MathJax MathML Test Page</title>
    <script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
                           tex2jax: {inlineMath: [["$","$"],["''(","'')"]]}
                           });
    </script>
</head>
<body>
    <div id="content" contenteditable="true" style="font-family: Helvetica">This is
    </div>
    <button onclick="myFunction()">Try it</button>
    <script>
    function myFunction() {
        var newP = document.createElement("p");
        newP.innerHTML = "'(ax^2 + bx + c = 0')";
        my_div = document.getElementById("2");
        document.body.insertBefore(newP, my_div);
    }
    </script>
    <p id = '2'>
       '(ax^2 + bx + c = 0')
    </p>
</body>

这段代码一切正常:

<p id = '2'>
   '(ax^2 + bx + c = 0')
</p>

但是当我动态插入新段落时，我看到错误的文本。很抱歉我的英语不好，但我真的不知道如何改正它。

试试这个:

function myFunction() {
  var newP = document.createElement("p");
  newP.id = 'unique-id';
  newP.innerHTML = "''(ax^2 + bx + c = 0'')";
  my_div = document.getElementById("2");
  document.body.insertBefore(newP, my_div);
  MathJax.Hub.Queue(['Typeset', MathJax.Hub, 'unique-id']);
}
一些备注:

  • 分隔符是'(和')，但是因为您将它们包含在Javascript字符串中，其中'是特殊的，您需要使用两个反斜杠;
  • 在您插入新的<p>元素之后，您需要告诉MathJax对其进行排版，这就是MathJax.Hub.Queue(...)所做的;它被赋予新创建的元素的id，虽然这不是严格必要的(但它是更快);注意id必须是唯一的;
  • 2的id在HTML中是无效的;
相关文章：