如何使用返回函数显示任何元素答案

【问题标题】：How to use return function to display any element如何使用返回函数显示任何元素
【发布时间】：2021-04-08 17:19:39
【问题描述】：

我见过这样写的函数来显示元素。我只想制作

hello world

出现在网页上。但这对我不起作用。使用这种方法将使我的应用程序更容易编写，而不是在每个元素上不断重写 .innerhtml。

function returnTest(){
  
  console.log("function is running");

  return `<p> hello world </p>`;
  }

$(returnTest);

【问题讨论】：

试试这个w3schools.com/jsref/met_document_createelement.asp

标签： javascript html jquery return

【解决方案1】：

你可以使用jQuery来使用这个功能，甚至可以传递参数来改变里面的文字

基本的方式是这样的：-

function returnTest(val){
   return `<p> ${val} </p>`;
}

$(document).ready(function(){
   $("#temp").html(returnTest("Hello world!"));
});

您也可以创建 Jquery 函数，尽管我使用了您使用的那个。

【讨论】：

【解决方案2】：

我创建了一个 jsfiddle 供您查看 https://jsfiddle.net/renzuii/rw714u5x/

function returnTest(){
  console.log("function is running");
  var p = document.createElement("p");
  p.innerHTML = "hello world";
  document.body.appendChild(p);
}

returnTest();

您必须先使用 createElement，然后将其附加到主体上。

【讨论】：

【解决方案3】：

它需要插入某个地方。

$('body').append(returnTest);

【讨论】：

谢谢。这是我最初使用的答案，并且效果很好。最后，虽然 append 对我的应用程序并没有完全起作用，因为我不得不替换文本几次。 append 只是附加了它，所以它正在增长和增长。但我会在未来的应用程序中使用它，感谢您的帮助。

【解决方案4】：

您想要实现的目标可以在 Reactjs 中完成。你不能使用 jquery 来做到这一点。如果你想在 jquery 中做，那么你必须使用其他答案显示的内容。

<div className="col-md-1">
    { this.returnTest }
</div>

别忘了绑定函数。如下所示。

constructor() {
    this.returnTest = this.returnTest .bind(this);
}

您也可以参考以下链接。如果你想这样做，显示相同。 React. Creating a function that returns html

【讨论】：