生のJSのDOM操作がしんどいです。

下記のように非常に大変な作業なのですが、これを解決するには文法の癖の激しいreactやvueなどのフレームワークを使うしかないのでしょうか?
http://qiita.com/kouh/items/dfc14d25ccb4e50afe89

基本的には関数、文法を生のJSで書き、reactなどをDOM操作の部分だけ使うという方法か、関数文法がほぼ生と同じな非常に癖のないバーチャルdomのフレームワークなどご存じないでしょうか?

下記のページで例えると {{t.name}} などかなり独特な書き方ですよね。
http://qiita.com/icoxfog417/items/49f7301be502bc2ad897

<div v-for="t in todos" 
         v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']"
         v-on:click="begin($index)">
      {{t.name}}
</div>

上記のようなvue独特の文法をつかわず、普通の生のJavaScriptの書き方で書けるのですか?

追記
タグをそのまま記載できるのは、確かにcreateElementやaddChildを毎度打つ大変さを考えると魅力的なので取り入れたいと思います。
ただ、HTMLタグをそのまま書く部分だけ生のJSに取り入れることができれば理想と考えています。