Javascript 使用自定义HTML标记并用outerHTML替换自定义标记可以吗？_Javascript_Html

Javascript 使用自定义HTML标记并用outerHTML替换自定义标记可以吗？

javascript html

Javascript 使用自定义HTML标记并用outerHTML替换自定义标记可以吗？,javascript,html,Javascript,Html,定义和使用自定义标记可以吗？（这不会与将来的html标记冲突）-通过更改outerHTML替换/呈现这些标记我在下面创建了一个演示，看起来效果不错 <!DOCTYPE HTML> <html lang="en-US"> <head> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <d

定义和使用自定义标记可以吗？（这不会与将来的html标记冲突）-通过更改outerHTML替换/呈现这些标记

我在下面创建了一个演示，看起来效果不错

<!DOCTYPE HTML> <html lang="en-US"> <head> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div id="customtags"> <c-TextField name="Username" ></c-TextField> <br/> <c-NameField name="name" id="c-NameField"></c-NameField> <br/> <c-TextArea name="description" ></c-TextArea> <br/> <blahblah c-t="d"></blahblah> </div> </body> <script> /* Code below to replace the cspa's with the actual html -- woaah it works well */ function ReplaceCustomTags() { // cspa is a random term-- doesn;t mean anything really var grs = $("*"); $.each(grs, function(index, value) { var tg = value.tagName.toLowerCase(); if(tg.indexOf("c-")==0) { console.log(index); console.log(value); var obj = $(value); var newhtml; if(tg=="c-textfield") { newhtml= '<input type="text" value="'+obj.attr('name')+'"></input>'; } else if(tg=="c-namefield") { newhtml= '<input type="text" value="FirstName"></input><input type="text" value="LastName"></input>'; } else if(tg=="c-textarea") { newhtml= '<textarea cols="20" rows="3">Some description from model</textarea>'; } obj.context.outerHTML = newhtml; } z = obj; }); } if(typeof(console)=='undefined' || console==null) { console={}; console.log=function(){}} $(document).ready(ReplaceCustomTags); </script> </html>

/*下面的代码用实际的html替换cspa——哇，它工作得很好*/ 函数ReplaceCustomTags（）{ //cspa是一个随机术语，实际上并不意味着什么 var grs=$（“*”）； $。每个（grs、函数（索引、值）{ var tg=value.tagName.toLowerCase（）；如果（tg.indexOf（“c-”）==0）{ 控制台日志（索引）； console.log（值）； var obj=$（值）； var-newhtml；如果（tg==“c-textfield”）{ newhtml=''； }else if（tg==“c-namefield”）{ newhtml=''； }否则如果（tg==“c-textarea”）{ newhtml='来自模型的一些描述'； } obj.context.outerHTML=newhtml； } z=obj； }); } if（typeof（console）='undefined'| | console==null）{console={}；console.log=function（）{} $（文档）.ready（ReplaceCustomTags）；

问题的最新情况：

让我进一步解释一下。请假设浏览器上启用了JavaScript，即应用程序不应该在没有JavaScript的情况下运行

我见过使用自定义属性在指定标记中定义自定义行为的库。例如Angular.js大量使用自定义属性。（它还有关于自定义标记的示例）。虽然我的问题不是从技术策略的角度提出的，但我无法理解为什么它会在策略上导致代码的可伸缩性/可维护性问题

按我看，类似的代码比类似的代码更可读。唯一的区别是，自定义标记被忽略而不呈现，而div类型由浏览器呈现

js确实显示了一个自定义标记示例（窗格/选项卡）。在我上面的示例中，我使用outerHTML替换这些自定义标记-虽然我在库中没有看到这样的代码-我使用outerHTML替换自定义标记是否做了一些短视和错误的事情

这可能很有效，但可能不是个好主意。屏幕阅读器和搜索引擎可能很难/不可能阅读您的页面，因为它们可能无法解释JavaScript。虽然我明白这一点，但最好使用此模板进行开发，然后在将其放在服务器上之前将其“烘焙”为HTML。

我想不出您希望这样做的原因

如果你必须从事一个由其他人编写的项目，而这些人忽略了所有的常规做法和惯例，你会怎么想？如果他们不再在公司寻找他们为什么以某种方式做事，会发生什么

事实上，您只需使用JavaScript就可以让它工作，这应该是一个巨大的危险信号。除非你有很好的理由这么做，否则帮你自己一个忙，使用之前存在的标签。六个月后，你还记得你为什么这样做吗？

我一直在寻找这个问题，发现很多答案都是“它不是html”和“它可能与未来的标签冲突”。我的问题更倾向于了解如果我采用这种方法是否会有严重的技术限制。如果你想问一个与同一问题上的许多现有问题本质不同的问题，你应该制定你的问题及其标题来反映这一点。谢谢，我已经更新了问题的更多细节。我以前也经历过“可能的重复”，它没有解决我的问题，但我无法从战略上理解它。我们将需要客户端JS使其工作-这是一个相当大的应用程序，我们希望保持用户界面呈现到客户端。我查看了IE8的最新浏览器，它似乎适合我们。实际上，我们确实从标准标记和自定义属性开始，比如div custom_type=“contact”…>-put很快发现它不那么可读。对我来说，用这种方式使用自定义标记与使用ExtJS这样的库一样，我们在其中编写Ext.create（'Ext.Panel'）。。。。开发人员不必看到所有HTML元素都是用什么创建的，如果它确实适合您，并且您的公司正在采用它，那么您就有了“非常好的理由”。只是要确保记录下你的标准，并保持最新。今后，您不希望花费更多的时间试图找出代码，而不是修复一个小错误。