Question

我有一个JavaScript函数：

func()

返回文本，例如：

Text of First td

我希望像这样使用它：

<table>
  <tr>
    <td><script>func()</script></td>
    <td>Cell B</td>
  </tr>
</table>

但是，未填充第一个td。

如何在不使用该脚本标记内的JQuery等的情况下执行此操作。

修改

另一个例子：

<table>
  <tr>
    <td><script>decodeURI("st%C3%A5le")</script></td>
    <td>Cell B</td>
  </tr>
</table>

我在td的循环中生成XSL。所以，我应该获取当前元素而不是getElementById或类似。

Answer 1

执行此操作的最佳方法是通过javascript操作元素的innerHTML

function showText() {
  document.getElementById('displayArea').innerHTML = "This is some content!";
}

//This will run on page load
document.addEventListener("DOMContentLoaded", function(event) { 
  showText();
});

<div id="displayArea"></div>

祝你好运！

Answer 2

Document.write

function func() {
    document.write('Text of First id');
}

Answer 3

您可以使用现有代码通过两种变体执行此操作：

function func()
{
    return "text of first td";
} 

<td><script>document.write(func())</script></td>

问题编辑的变体：

<td><script>document.write(decodeURI("st%C3%A5le"))</script></td>

或通过更改func

function func()
{
    return document.write("text of first td");
} 

<td><script>func();</script></td>

document.write会在命中后立即执行并直接输出到文档。

Answer 4

如果您不介意在DOM中保留脚本标记，可以使用document.write。这将在脚本标记之后立即插入文本（在<td>内）。如果您想用ScriptElement替换当前TextNode，可以这样做：

<script>
(function () {
    var script = (document.currentScript || function () { 
        var scripts = document.getElementsByTagName( 'script' );
        return scripts[ scripts.length - 1 ];
    }() );

    script.parentNode.replaceChild( document.createTextNode( func() ), script );
})();
</script>

这将完全从DOM中删除脚本，并将其替换为文本，这样如果在此之后检查DOM，您将只看到td内的文本，但没有脚本。

JSFiddle Preview

我建议将所有逻辑放在一个函数本身中，这样你的HTML代码就更清晰了：

function func () {  replaceScript( 'Hello!' ); }

var replaceScript = function ( message ) {
    var script = document.currentScript || function () { 
        var scripts = document.getElementsByTagName( 'script' );
        return scripts[ scripts.length - 1 ];
    }();


   script.parentNode.replaceChild( document.createTextNode( message ), script );
};

然后你的HTML看起来像：

<td><script> func() </script></td>

或：

<td><script> replaceScript( decodeURI("st%C3%A5le") ); </script></td>

JSFiddle Preview

Answer 5

获取元素的引用并在脚本中调整它的innerHTML。

<table>
  <tr>
    <td></td>
    <td>Cell B</td>
  </tr>
</table>

<script>
  document.querySelector('td').innerHTML = func();
</script>

如何在HTML中使用JavaScript返回值

5 个答案: