首页 \ 问答 \ 如何使用javascript注入一个大的html代码点击按钮?(How can I inject a large html code onclick of a button using javascript?)

如何使用javascript注入一个大的html代码点击按钮?(How can I inject a large html code onclick of a button using javascript?)


我想生成一个按钮的表单,并使用Javascript提交相同的内容。
如何在不手动创建DOM元素并附加它的情况下添加大型html代码?
有没有什么方法可以让整个HTML代码立刻被追加?



I want to generate a form onclick of a button and submit the same using Javascript.
How can I add a large html code without manually creating DOM elements and appending it ?
Is there any way so that whole html code can get append at once ?


原文:https://stackoverflow.com/questions/37685001
更新时间:2019-11-21 11:14

最满意答案

HTML

<div id="form-container"> </div>  
<button id ="get-form" onclick="getForm()">Get Form</button> 

使用Javascript

  <script>
   var form = '<form>
                    <h1>form title</h1>
                    </form>';
    function() {
      document.getElementById('form-container').innerHTML = form;
    }
 </script>

HTML

<div id="form-container"> </div>  
<button id ="get-form" onclick="getForm()">Get Form</button> 

Javascript

  <script>
   var form = '<form>
                    <h1>form title</h1>
                    </form>';
    function() {
      document.getElementById('form-container').innerHTML = form;
    }
 </script>
2016-06-07

相关问答

更多

如果一个物体撞得太快,区域约束就会炸毁我的物理模拟(Area constraint blows up my physics simulation if a body slams into it too fast)

我看到你正在用恒定的时间步长T进行计算。当在每一步上建模碰撞时,你应该使用等于最小时间的时间步长,然后任何原子到达任何障碍物。 使时间步长变化,原子永远不会“隧道”障碍。 PS碰撞检测有很多优化,请阅读gamedev论文以获取相关信息。 PS一个bug? force = new Vector2(-(_min.X - atom.Position.X), 0); 为X和Y反射单独创建力。 当原子进入角落时会发生什么? 只会施加第二个力。 PPS:使用epsilon 另一个重要的注意事项:如果使用浮

在另一个线程中使用WPF多边形(Using a WPF Polygon in another thread)

问题不在于Dictionary ,问题是Polygon存储在Dictionary中。 这些是在UI线程中创建的WPF UI元素,因此只有UI线程可以使用它们。 您可以在UI线程中执行Render操作(使用Dispatcher.Invoke )。 这意味着渲染会阻止您的UI线程,但至少在渲染操作之间 ,UI线程将能够处理其他事情,即,如果单个渲染操作所需的时间不是太多,则UI应该保持响应长。 The problem is not the Dictionary, the problem is the

Xcode英特尔编译器icc找不到#include (Xcode Intel compiler icc cannot find #include )

你已经设置了什么作为基础SDK? 什么版本的Xcode? FWIW我刚尝试使用Xcode 3.2.3和ICC 11.1(当然是OS X 10.6) - 使用标准Xcode模板创建了一个新的C ++控制台应用程序,将#include <algorithm>添加到main.cc,从默认切换gcc 4.2到ICC,它编译并运行时没有警告或错误。 基本SDK是系统默认值(10.6)。 可能只是您安装了错误的Xcode和/或ICC,或者您可能更改了基本SDK等项目设置,这会导致问题。 What do yo

Java - 在发送到方法之前递增变量(Java - Incrementing a variable before sending to the method)

k++执行后增量 。 换句话说,表达式的值是k的原始值,然后k递增。 在调用方法之前它仍然会增加,但作为参数传递的值是增量发生之前的值。 换句话说,打电话: x = list.get(k++); 相当于: int tmp = k; k = k + 1; x = list.get(tmp); 所以,如果你真的有: memory_version = array_list_data.get(k++); // Calls with 0, then k=1 mains_voltage_min =

Web框架API(Web framework API)

Wt是其预期应用范围的一个很好的框架。 这非常适合: 网络应用紧密耦合到会话,即 仅供登录用户访问(登陆页面除外) 显示许多依赖于用户的内容(因此不适用于维基) 严重依赖国家 需要大量控件/按钮和用户输入的Web应用程序。 例如,我打算编写一个浏览器MMORPG。 页面将全部与用户绑定状态,并且会有很多按钮。 这是完美的 。 我曾经是一个Ruby on Rails开发者,切换到Wt这个应用程序是一个伟大的时刻。 使用试图强制执行纯REST的传统框架来设计表单会非常麻烦。 对某些进程的控制接口来说

如何使用Ember Data查找模型?(How to find model with Ember Data?)

现在,ember数据1.0.0 beta2中的等效方法是: this.store.find('person', {age: 30}) 有关所有更改的更多信息,请点击此处 。 希望能帮助到你。 The equivalent method in ember data 1.0.0 beta2 is now: this.store.find('person', {age: 30}) More info on all the changes can be found here. Hope it hel

变量赋值和文字常量之间的区别?(Difference between variable assigning and literal constant?)

你确实很困惑: int age = 20; 将整数值20赋给变量age 。 int AGE = 20; 将整数值20赋给变量AGE 。 没有区别。 You are confused indeed: int age = 20; assigns integer value 20 to a variable age. int AGE = 20; assigns integer value 20 to a variable AGE. There's no difference.

Google可视化API的替代方案[关闭](Alternative to Google visualisation API [closed])

http://raphaeljs.com是一个非常好的图书馆 http://raphaeljs.com is a very nice library

相关文章

更多

最新问答

更多
  • 用于Json解析的Phonegap插件(Phonegap Plugin for Json parsing)
  • ActionScript 2加载另一个加载其他文件的SWF - 相对路径/网址问题(ActionScript 2 load another SWF that loads other files - relative path/url problem)
  • 使用sql将一些列值放入新列中(put some column values in a new column using sql)
  • 在iOS中为NivevehGL设置View的背景图像(Setting the background image of the View for NivevehGL in iOS)
  • 从普通的C#开发人员到普通的Java开发人员需要多长时间?(How long will take from an average C# developer to an average Java developer?)
  • 通过datetimefield SQL Server加入(Joining by datetimefield SQL Server)
  • Python中是否有任何智能打印方法?(Are there any smart print methods in Python?)
  • R中关闭另一个表[关闭](Removing one table from another in R [closed])
  • 枚举数字(Enumerating digits)
  • 我想从现有数组中获取新数组,其中key是旧数组的重复值,value是重复计数?(I want new array from existing array with key as repeated value from old array and value as repeated count?)
  • 如何在不创建实例的情况下调用类方法(How to call a class method without creating an instance)
  • wxHaskell中嵌入的图像(Embedded images in wxHaskell)
  • 蚂蚁战争任务如何运作?(How does the ant war task work?)
  • Windows Workflow 4中的人员活动支持(Human activity support in Windows Workflow 4)
  • 在Firebug的Net Panel中缺少'DomContentLoaded'和'加载'时间信息(Missing 'DomContentLoaded' and 'load' time information in Firebug's Net Panel)
  • 如何抓取页面以查看复选框/广播/文本输入并检测其原始值的更改?(How can I crawl the page for checkbox/radio/text inputs and detect changes to their original values?)
  • Document.ready不起作用(Document.ready won't work)
  • Java序列化问题(Java serialization problem)
  • Javascript:如何在页面刷新时处理令牌验证?(Javascript: How should I handle token verification on page refresh?)
  • 数据库安全:中间“to_be_deleted”列/表?(Database safety: Intermediary “to_be_deleted” column/table?)
  • 使用mayavi时如何删除scalar_cut_plane中的红框和白色箭头?(How to remove the red frame and white arrow in scalar_cut_plane when using mayavi?)
  • 如何延迟MainPage,所以它在加载数据后启动?(How to delay MainPage, so it starts after data is loaded?)
  • 按Enter键更改EditText(Press Enter to change EditText)
  • 使用libavcodec解码时可以裁剪帧大小吗?(Can the frame size be cropped during decoding using libavcodec?)
  • Performance_Python根据元组的3个元素中的2个获得2个元组列表的并集(Performance_Python get union of 2 lists of tuple according to 2 out of the 3 elements of the tuple)
  • 为什么法线会随相机旋转?(Why normals rotate with camera?)
  • 如何将Intent与ListView一起使用?(How do I use Intents with ListView?)
  • html_safe无法使用rails(html_safe not working with rails)
  • 录制没有单独的程序或库的opengl视频(record opengl video without separate program or library)
  • 滚动到特定视图(Scroll to particular view)