我在网上搜索了用javascript更改html代码的信息,但是我一直发现的只是.innerHTML之类的东西,然后输出文本。我想知道我们是否可以仅使用javascript / jquery / json更改后端的html代码
例如,我有一个输入文本区域,输出文本为红色,.class1
并带有一个提交按钮,然后在文本区域中键入class2或2,然后在提交后进行.class1
更改.class2
。
这只是一些简单代码的示例。
//so I have two classes here just for example
.class1
{
color:red;
}
.class2
{
color:blue;
}
//form with action and method and a text area input and a submit button
<form action=" " method="post">
<label>Which class</label><input type="text">
<input type="submit">
//let's say this is the original out put (.class1 with text Using Class 1 in blue)
<p class="class1"> Using Class 1</p>
现在让我们说我在class2中键入的文本区域中,然后单击Submit
<p class="class1"> Using Class 1</p>
更改为 <p class="class2"> Using Class 2</p>
甚至没有class3,但如果在文本区域中输入class3或乱码,则输出将类似于 <p class="class3 or gibberish"> Using class3 or gibberish</p>
实际上,我对更改这一<p class="class3 or gibberish">
功能可以做得比Using class 3
部分更感兴趣。
希望我的解释不会太乱。
提前谢谢大家〜
我已经完成使用Jquery.Following解决方案将帮助满足您的需求。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Untitled Page</title>
<style type="text/css">
.class1
{
color:red;
}
.class2
{
color:green;
}
</style>
<script type="text/javascript">
function fnSubmit() {
$("#p1").replaceWith("<p class='" + $("#txtInput").val() + "' id ='p1' >using" + $("#txtInput").val() + " </p>");
return false;
}
</script>
</head>
<body>
<form action=" " id="frm">
<label>
Which class</label><input type="text" id="txtInput">
<input type="submit" id="btnSubmit" onclick=" return fnSubmit();">
<p class="class1" id="p1">
Using Class 1</p>
</body>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句