使用 javascript 函数渲染 HTML

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17420146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:40:37  来源:igfitidea点击:

using javascript function to render HTML

javascripthtml

提问by Mayur

I have a static page that has loginand registrationlink.I want that when a user clicks on Login,it calls a Javascriptfunction that in turn displays the Login Formon the same page.

我有了一个静态页面loginregistrationlink.I希望的是,当用户点击Login,它调用一个Javascript函数,反过来显示Login Form在同一页面上。

Although I can embed the whole HTML tag in document.write()but that is very messy and am sure is not the best practice for long HTML codes.

虽然我可以将整个 HTML 标签嵌入其中,document.write()但这非常混乱,而且我确信这不是长 HTML 代码的最佳实践。

So how can i embed HTML codes into the JS function?and how do i control the positioning of the form on the page.

那么如何将 HTML 代码嵌入到 JS 函数中?以及如何控制表单在页面上的位置。

I am looking for a Javascript solution only and not JQuery

我正在寻找一个 Javascript 解决方案,而不是 JQuery

采纳答案by VladH

Try to make a div containing your elements for the registration So for HTML you can use something like this

尝试制作一个包含用于注册的元素的 div 所以对于 HTML,你可以使用这样的东西

<div id="regElements" style="display:none;" class="registration" >Elements for a registration form</div>
<input type="button" name="re" onclick="showReg()" />

And for Javascript you just use ths function

对于 Javascript,您只需使用 ths 函数

function showReg() {
    document.getElementById("regElements").style.display = "";
}

You can find examples of this code everywhere! Good luck!

你可以在任何地方找到这段代码的例子!祝你好运!

回答by Drixson Ose?a

html = "<form>....</form>";

document.getElementById("example").innerHTML = html;

回答by surfealokesea

Use html tag:

使用 html 标签:

<iframe id="iframeid" ...>

Javascript:

Javascript:

document.getElementById("iframeid").src="url";

http://www.w3schools.com/tags/tag_iframe.asp

http://www.w3schools.com/tags/tag_iframe.asp