javascript - 我可以通过提交更改带有 javascript/jquery 的 html 标记/代码吗？

Question

我在网上搜索用 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 然后单击提交

<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部分。

希望我的解释不会太乱。

先谢谢大家~

Answer 1

如果我理解了您要执行的操作，您需要使用 removeAttr('class') 删除任何现有样式，然后使用 addClass() 把新的。试试这个:

<label>Which class</label>
<input type="text" id="class-name" />
<input type="button" id="update" value="Update" />
<p class="class1">Using Class 1</p>

$('#update').click(function () {
    var newClass = $('#class-name').val();
    $('p')
        .removeAttr('class')
        .addClass(newClass)
        .text('Using ' + newClass);
});

Example fiddle